Генератор favicon   •   Online-инструменты
397 просм
3 комм
Поделиться:

Выделяем активный пункт меню на 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;
}

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

3
комментария
Андрей
7.10 в 10:25
Добрый день, не получается подключить скрипт. Сайт у меня на php, и делится на блоки, вот 2 меню, на которых пробовал скрипт:

1)
<nav class="navigations">
<a href="/../../admin/index.php">Главная</a>
<a href="/../../admin/aside/dobavit_statyu.php">Добавить статью</a>
<a href="../admin/aside/izmenit_statyu.php">Изменить статьи</a>
<a href="../admin/aside/schetchik_poseshchenij.php">Счетчик посещений</a>
<a href="../admin/aside/chernyj_spisok.php">Бан лист</a>
</nav>


2)
<ul class="navigations">
<li><a href="/../../admin/index.php">Главная</a></li>
<li><a href="/../../admin/aside/dobavit_statyu.php">Добавить статью</a></li>
<li><a href="../admin/aside/izmenit_statyu.php">Изменить статьи</a></li>
<li><a href="../admin/aside/schetchik_poseshchenij.php">Счетчик посещений</a></li>
<li><a href="../admin/aside/chernyj_spisok.php">Бан лист</a></li>
</ul>

скрипт 2):
<script>
$(function() {
var pathname_url = window.location.pathname;
var href_url = window.location.href;
$('.navigations li').each(function () {
var link = $(this).find('a').attr('href');
if (pathname_url == link || href_url == link) {
$(this).addClass('active');
}
});
});
</script>


css 2):

ul.navigations li.active a {
background: GreenYellow;
border: 1px solid silver;
}


Пока разбираюсь со вторым примером, так как на него много решений в поисковике, но они не помогают(
  • 0
Андрей, Здравствуйте. Все ваши варианты не верны. Ссылки в меню должны быть такого вида:

<nav class="navigations">
<a href="/admin/index.php">Главная</a>
<a href="/admin/aside/dobavit_statyu.php">Добавить статью</a>
<a href="/admin/aside/izmenit_statyu.php">Изменить статьи</a>
<a href="/admin/aside/schetchik_poseshchenij.php">Счетчик посещений</a>
<a href="/admin/aside/chernyj_spisok.php">Бан лист</a>
</nav>

То есть без /../../ и т.д. И тогда все будет работать.
  • 1
Андрей
7.10 в 11:39
Спасибо огромное! Все сразу заработало!))
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария