Генератор случайных чисел
Артем Мáлков
142 просм
0 комм
Поделиться

Выделяем активный пункт меню на jQuery

На различных CMS есть стандартные инструменты (настройки, плагины), и с их помощью можно реализовать подсветку пункта в меню, в котором находится пользователь.

Но данный функционал есть не у каждого, особенно если сайт статичный. Одно могу сказать точно – если вы еще не реализовали это на своем сайте, то уделите немного времени и устраните пробелы в юзабилити, ведь такая функция помогает пользователю сориентироваться на вашем сайте.

Для решения задачи, как вы поняли, мы используем jQuery, и реализация будет выглядеть следующим образом.

Предположим, что у нас имеется такое меню:

<ul class="navigation">
<li><a href="/main">Главная</a></li>
<li><a href="/about_us">О нас</a></li>
<li><a href="/about_us/team">Команда</a></li>
</ul>

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

Готовый скрипт для данного примера будет выглядеть следующим образом:

<script>
$(function () {
var pathname_url = window.location.pathname;
var href_url = window.location.href;
$('.navigation li').each(function () {
var link = $(this).find('a').attr('href');
if (pathname_url == link || href_url == link) {
$(this).addClass('active');
}
});
});
</script> 

«active» здесь – класс активного пункта меню. Далее, применяя стили, выделяете активный пункт, например, с помощью цвета:

.navigation li.active a {color: green}

По аналогии скрипт можно переделать под любую другую структуру меню. Если у вас возникают с этим проблемы – пишите в комментариях, постараюсь помочь.

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария