Генератор устойчивых к взлому паролей   •   Online-инструменты
1 509 просм
19 комм
Поделиться:

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

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

19
комментарий
Навигация:
1 2
Андрей
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>

То есть без /../../ и т.д. И тогда все будет работать.
  • 6
Андрей
7.10 в 11:39
Спасибо огромное! Все сразу заработало!))
  • 1
РУСЯ
9.11 в 00:36
Братка спасибо все ясно и понятно с первого раза заработало!
  • 1
Павел
19.12 в 08:07
Привет, Артем! Все отлично работает на уровне http://domain.com/manual_therapy/ , но когда ссыль такого вида http://domain.com/manual_therapy/examples.html , не подсвечивает. Как быть?
  • 1
Павел, Здравствуйте.

Четыре комментария выше похожая структура у человека - и все работает. Перепроверьте структуру на своем сайте или скиньте адрес сайта где наблюдается проблема - постараюсь помочь.
  • 5
АлексСВАО
16.01 в 14:01
А если меню многоуровневое, то как посветить одновременно главный пункт меню и его подменю
например чтобы находясь на странице подменю п.2 подсвечивалось и меню п.3 и само подменю п.2
<li><a href="#">меню п.1</a></li>
<li><a href="#">меню п.2</a></li>
<li class="vertical_list"><a href="#">меню п.3</a>
<ul>
<li><a href="#">подменю п.1</a></li>
<li><a href="#">подменю п.2</a></li>
<li><a href="#">подменю п.3</a></li>
</ul>
</li>
  • 0
АлексСВАО
16.01 в 15:15
и да, <li class="vertical_list"> не одно, а то было бы слишком легко ....
  • 0
АлексСВАО, Попробуйте так.

Меню:

<ul class="navigation">
<li><a href="#">меню п.1</a></li>
<li><a href="#">меню п.2</a></li>
<li class="vertical_list">
<a href="#">меню п.3</a>
<ul>
<li><a href="#">подменю п.1</a></li>
<li><a href="#">подменю п.2</a></li>
<li><a href="#">подменю п.3</a></li>
</ul>
</li>
</ul>

Скрипт:

$(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');
$(this).parent().parent().addClass('active');
}
});
});

Стили:

.navigation li.active a {
color: green;
}

.navigation li:not(.active) a {
color: black;
}

В таком случае, если вы находитесь на "подменю п.1", то пункт "меню п.3" тоже подсветится.
  • 12
АлексСВАО
16.01 в 19:58
Да, спасибо, разобрался, сделал чуть иначе -

$(this).closest('li.vertical_list').addClass('current');

.closest(selector, [context]) - возвращает первый ближайший родительский узел
  • 0
DarkShin
22.04 в 20:06
Возникли трудности на DLE c первым вариантом но вариант с под категориями работает отлично )
Жаль что подсветка только когда на категории и неизвестно будет ли светиться когда будешь на 2 или 15 странице.
Но самое обидное что когда находишься в новости этой категории она не подсвечивается. А с этим немного теряется полезность ( Можно сделать чтобы цвет держался пока ты не только в разделе но и в новости этого раздела?
  • 0
Андрей
13.06 в 15:48
Блин,еще раз спасибо, опять помог ваш сайт (я писал первый комментарий "андрей")..
2 дня с yii2 бился, не мог поставить active, но все уже заработало.

Одна проблемка осталась, у меня страницы открываются с пагинацией, когда на первой странице находишься, работает active, а как сделать чтобы кнопка оставалась открытой когда переходишь по пагинации?

Url такой имя сайта/category/2/page-2 , без /page-2 все отлично работает. Повторюсь, сайт на yii2.. Запутался уже((
  • 1
Андрей
13.06 в 21:39
не поможете?:((
  • 0
Андрей, Не совсем понял.

Чтобы перейдя по пагинации все равно подсвечивался /category/2/ ?
  • 0
Андрей
13.06 в 22:10
блин... Ну вот допустим я нажимаю на курашим http://prntscr.com/jum0ew, открывается страница с этой категорией kur.local/category/2 , кнопка "курашим" остается нажатой. Но если перейти на 2-ую страницу пагинации, то active с кнопки слетает http://prntscr.com/jum2p0

Вот, мне нужно чтобы на каждой странице пагинации на кнопке висело active. Так же как и на других категориях, и вложенных в курашим тоже

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