Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Меню для всех страниц с возможностью подсветки текущего пункта

1 ноября 2018 | Опубликовано в css | Нет комментариев »

Меню — важная часть любого сайта. Здесь пользователь ищет и находит основные разделы сайта. Чем приятнее взаимодействовать с этим элементом интерфейса, тем довольнее будут посетители вашего сайта. Сегодня мы рассмотрим еще один вариант простого оформления меню, в котором подсвечивается текущий пункт.

 

 


Вы точно видели подобный код HTML очень много раз:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

Это неустаревающее HTML меню, которое с помощью кода CSS можно превратить в бесконечное число разнообразных вариантов. Можно включить этот код на все веб-страницы Вашего веб-сайта, поместив его в отдельный файл HTML, такой как, например, menu.html, и подключив его на все веб-страницы с помощью какого-нибудь простого способа подключения файла, такого как этот короткий код PHP:

<?php include_once("menu.html"); ?>

Теперь нужно добавить класс, чтобы показывать пользователям, где они находятся в данный момент относительно этого меню:

<ul>
  <li><a class="selected" href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

Выбранный класс может включать фоновое изображение или полужирное выделение текста или что-то другое, что обозначит нужный пункт меню. Это хорошо, но теперь придется задавать отдельные стили этому блоку для каждой страницы. И это лишает смысла использование подключения файла. Если поступить таким образом, потребуется добавлять этот код на каждую веб-страницу и вносить в него изменения, связанные с наличием этого класса.

Вместо этого давайте зададим каждой ссылке в меню собственный уникальный класс:

<ul>
  <li><a class="home" href="#">Home</a></li>
  <li><a class="about" href="#">About us</a></li>
  <li><a class="contact" href="#">Contact us</a></li>
</ul>

Но это все еще не дает нам возможность выделить определенные элементы меню на определенных веб-страницах. По меньшей мере это не поможет само по себе.

А вот и решение.

Нужно задать каждому тегу body на веб-страницах уникальный идентификатор. Такой как <body id="home">. После этого можно создавать код CSS, который повлияет на элементы меню, только когда класс ссылки в меню и идентификатор тега body совпадут:

#home .home, #about .about, #contact .contact
{
Здесь находятся Ваши стили CSS
}

Это прекрасный пример эффективности и четкости кода CSS.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:


  • Опубликовано в css, ноября 1, 2018


Оставить ответ


пять + 7 =

Вставить изображение

Похожие статьи