Меню для всех страниц с возможностью подсветки текущего пункта
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
Перевод — Дежурка
Смотрите также:
549