Главная Часть 1. Создание блога Глава 8. Техническая часть Как выделить активный пункт меню с помощью css и jquery?

Как выделить активный пункт меню с помощью css и jquery?

выделить активный пункт меню

Приветствую всех читателей моего блога!

Сегодня за разработкой очередного проекта встала задача сделать выделение активного пункта меню. То есть, у нас есть меню со страницами. Мы переходим на одну из страниц, и в меню ссылка на эту страницу начинает подсвечиваться, так и говоря нам: "Ты сейчас здесь". В этой статье я предлагаю, наверное, самое быстрое и удобное решение данного вопроса.

Сама идея публикации статьи на эту тему возникла после того, как я узнал, что есть люди, подключающие целую специально созданную библиотеку для того, чтобы подсветить пункты в одном несчастном меню. Я такой подход не одобряю.

Поэтому сейчас я Вам покажу как с помощью css и jquery можно выделить активный пункт меню.

Набросаем само меню, как оно выглядит:

Теперь давайте определимся с дальнейшем алгоритмом. Нам необходимо прописать для пункта li какой-нибудь класс, например, active. После чего прописать для него стили. Давайте откроем файл style.css или тот, в котором лежат все стили на Вашем сайте. Пропишем туда следующее:

Теперь наша задача заключается в том, чтобы при переходе на одну из страниц из пункта меню, нужный пункт получал класс active. Сделать это нам поможет jquery. Сначала я приведу код, а потом уже дам комментарии по нему.

Итак, тег