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

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

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

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

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

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

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

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

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

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

Итак, тег

В него мы вставляем все наши javascript скрипты. Document.ready - ждем, когда страница полностью загрузится, и лишь после этого скрипт начнет работать. Далее мы добавляем переменную с названием my_link и кладем в нее ссылку на страницу, на которой мы сейчас находимся.

Теперь делаем выборку. Выбираем наше меню top_menu (смотрите html код выше), причем выбираем именно тот пункт меню, в котором содержится ссылка той страницы, на которой мы сейчас находимся. Другими словами, если мы сейчас находимся на странице Новости, тогда выбирается тот пункт меню, в котором есть ссылка /news.

Ну и после того, как был выбран данный пункт - присваиваем ему класс active. Как видите, все очень просто! Вставляйте код перед Вашим меню.

Я знаю, что сейчас найдутся люди, у которых приведенный выше код работать не будет. Смотрите внимательно, самая распространенная ошибка - в выборке. Вы забываете вставить id или класс Вашего меню. Если Вы проверили код, и считаете, что в нем все верно, но он не работает - пишите в комментариях, разберемся вместе.

На этом у меня все, успехов Вам!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Андрей Николаев
0

Отличный способ! Искал как-то готовые решения, в итоге установил jquery плагин. Плагины больше подойдут для новичков, хотя согласен, что намного умнее использовать код. И нагрузки меньше, и результат как надо. Спасибо за статью! Первая в новом году)

15.01.2016
2

Один плагин можно и поставить, а если следовать по пути "небольшая проблема - ставим плагин", то так можно и сайт похоронить.

15.01.2016
Валерий Андропов
1

Соглашусь насчет плагинов. Тем более выделение активного пункта меню - это не та проблема, ради которой следует ставить плагин. Подсветка синтаксиса у тебя очень красивая. Крайон? Намного лучше, чем простое поле с кодом, которое желтое. Ну это личное мнение. Статьи очень интересно написаны, двигайся в том же направлении!

20.01.2016
0

Крайон, он самый. Мне тоже он больше нравится, правда нагружает очень сильно. Как раз думаю, что бы с этим сделать. Спасибо за отзыв 🙂

20.01.2016
Максим
0

А если применить только CSS? То есть, написать код стиля, а в HTML-коде подобавлять атрибут class="имя" в тот пункт меню, которому соответствует страничка. Так вроде кода меньше.
Извините я пока новичок, и не понял в чем преимущество использования скриптов в данном случае. Вот если бы они сами определяли адрес странички и привязывали стиль к пункту меню в котором этот адрес совпадает с гипер-ссылкой, а так выходит все равно метку на страничку надо ставить. Вот мне и кажется, что можно обойтись только одним CSS.
Возможно я не прав и применение скриптов все же лучше, только я не знаю чем.

13.02.2016
0

Добрый день. Смотрите в чем дело. Во всех новых сайтах меню содержится либо в шапке, либо в сайдбаре. Они убираются в отдельные файлы и просто подключаются ко всем страницам. Т.е. они вообще не меняются, меняется только контент на странице. Поэтому если мы добавим какому-то пункту меню класс active, то этот пункт будет всегда подсечен, несмотря на то, на какой странице мы находимся. А именно jquery позволяет определить какой адрес у нас в адресной строке, затем этот адрес берется и сравнивается со ссылками в меню. И если находится совпадение - эта ссылка подсвечивается. Вот и весь простой алгоритм.

14.02.2016
Максим
0

Спасибо, понял.

14.02.2016
Максим
0

Здравствуйте. А Вы случайно не знаете где можно найти информацию о том как делать подгружаемый контент при статических элементах меню, которые остаются неизменными (так как Вы писали выше: шапка, сайдбар, подвал)? Контент должен грузиться именно из другого html-файла.
Дело в том, что через поисковик ничего подходящего найти не могу. Есть что-то похожее, но не именно то, что мне нужно.
Если Вы вдруг знаете хороший источник - был бы рад. Ну а если нет, так нет.

15.02.2016
0

Доброе утро. Источника не знаю, но могу сказать что именно искать. Не получится в один html файл подгружать другой средствами html. Здесь на помощь приходит php. Создаете несколько файлов: header.php, footer.php, ну и самый главный - index.php. И просто в начало, где должна быть шапка вставляете include('header.php'). А в конец так же футер. Таким образом можно подключать сколько угодно разных файлов. Если не знаете php - срочно учите. Если базовые знания есть, то почитайте про функции include, require и require_once.

16.02.2016
Максим
0

Спасибо, попробую. С php немного знаком, попытаюсь разобраться с данным методом подключения.

16.02.2016
0

Удачи Вам!

16.02.2016

Оставить комментарий

Поделиться