Профессиональная поддержка сайтов: разработка, дизайн, тексты, SEO и прочее от 500 Р   •   Реклама
5 341 просм
42 комм
Поделиться:

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

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

42
комментария
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Администратор  |  725

Александр, здравствуйте. Если я правильно понял, то скрипт:

<script>

$(function() {

var pathname_url = window.location.pathname;

var href_url = window.location.href;

$("#content_0 li").each(function () {

var link = $(this).find("a").attr("href");

if (pathname_url == link || href_url == link) {

$(this).addClass("active");

}

});

});

</script>

Стили:

#content_0 li.active a {

color: green !important;

}

10.05 в 12:29
  • 0
Пользователь  |  1

Артём, привет! Всем участникам тоже.

А можете подсказать как быть в моём случае чтобы выделить активный пункт меню, созданного с помощью плагина? Может быть просто нужно что-то прописать в стили используя уже имеющиеся current-menu-parent, current-menu-ancestor или current-menu-item?

А вот что прописать я не знаю. И возможно ли такое что плагин "перекроет" стили темы и их нужно будет прописывать непосредственно в css плагина? Заранее большое спасибо.

КОД МЕНЮ:

<ul id="accordeconck2" class="menu" accordeonck_done="1"><li id="menu-item-2639" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children accordeonck parent menu-item-2639 level1 parent open"><span class="accordeonck_outer toggler toggler_0"><span class="toggler_icon"></span><a class="accordeonck">◈  ОТДЕЛКА СНАРУЖИ</a></span>

<ul class="content_0" style="display: block;">

<li id="menu-item-2644" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item accordeonck menu-item-2644 level2"><span class="accordeonck_outer "><a href="https://m-door.ru/product-category/otdelka/poroshok/" class="accordeonck">Порошок</a></span></li>

<li id="menu-item-2643" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat accordeonck menu-item-2643 level2"><span class="accordeonck_outer "><a href="https://m-door.ru/product-category/otdelka/mdf/" class="accordeonck">МДФ</a></span></li>

<li id="menu-item-2642" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat accordeonck menu-item-2642 level2"><span class="accordeonck_outer "><a href="https://m-door.ru/product-category/otdelka/massiv-duba/" class="accordeonck">Массив дуба</a></span></li>

</ul>

</li>

</ul>

10.05 в 11:56
  • 0
Проверенный  |  10

Всё получилось!!! Спасибо огромное, Артём!

1.04 в 22:43
  • 1
Администратор  |  725

Амир Минсафин, посмотрел. Чтобы меню работало - ссылки в меню нужно проставить на всех страницах. Сейчас они есть только на главной.

Подсветка работает. Увидеть Вы можете это на главной странице.

Для этого, либо адрес у ссылки в меню вместо /index.php сделайте /, либо в браузере добавьте /index.php.

1.04 в 01:02
  • 1
Администратор  |  725

Амир Минсафин, в облако + ссылку в комментарии.

31.03 в 23:10
  • 0
Проверенный  |  10

Артём спасибо! Куда можно скинуть? Здесь негде прикрепить файл

31.03 в 21:19
  • 0
Администратор  |  725

Амир Минсафин, так трудно помочь. Выгрузите архив сайта, посмотрю у себя локально его.

30.03 в 23:43
  • 1
Проверенный  |  10

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(function() {

var pathname_url = window.location.pathname;

var href_url = window.location.href;

$(".nov li").each(function () {

var link = $(this).find("a").attr("href");

if (pathname_url == link || href_url == link) {

$(this).addClass("active");

}

});

});

</script>

</body>

</html>

30.03 в 21:33
  • 0
Проверенный  |  10

.nov a{

font-size: 2rem;

font-weight: 800;

text-decoration: none;

color: #FD6930;

border-radius: 20px;

padding: 0 0.5rem 0 0.5rem;

display: block;

}

.nov a:hover {

color: #374483;

background: /*#FF8253;*/url(../images/nov-li-bg.jpg);

transition: 0.6s;

}

.nov li.active a{

color: #374483;

background: url(../images/nov-li-bg.jpg);

transition: 0.6s;

}

30.03 в 21:32
  • 0
Проверенный  |  10

<div class="novig-display">

<ul class="nov">

<li><a href="/index.php">главная</a></li>

<li><a href="/for_us.html">о нас</a></li>

<li><a href="/news.html">новости</a></li>

<li><a href="/Payment_delivery.html">оплата и доставка</a></li>

<li><a href="/guarantees.html">гарантии</a></li>

<li><a href="/discounts.html">скидки</a></li>

<li><a href="/contacts.html">контакты</a></li>

</ul>

</div>

30.03 в 21:29
  • 0
Проверенный  |  10

Артём, получилось вот что: теперь получается переключить вкладки и только один раз, например загружаю главную страницу cover-mania2.loc/, затем нажимаю любую вкладку, например скидки http://cover-mania2.loc/discounts.html, вкладка переключается - появляется содержимое вкладки, а дальше всё, на какие бы я вкладки не нажимал, переключается только путь в командной строке браузера. И активные вкладки так и не подсвечиваются.

30.03 в 21:18
  • 0
Администратор  |  725

Попробуйте:

<li><a href="/OSPanel/domains/cover-mania2.loc/for_us.html">о нас</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/news.html">новости</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/Payment_delivery.html">оплата и доставка</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/guarantees.html">гарантии</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/discounts.html">скидки</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/contacts.html">контакты</a></li>

заменить на:

<li><a href="/for_us.html">о нас</a></li>

<li><a href="/news.html">новости</a></li>

<li><a href="/Payment_delivery.html">оплата и доставка</a></li>

<li><a href="/guarantees.html">гарантии</a></li>

<li><a href="/discounts.html">скидки</a></li>

<li><a href="/contacts.html">контакты</a></li>

30.03 в 17:58
  • 1
Проверенный  |  10

Далее нажимаю на стрелку (назад на предыдущую страницу), то нажатый пункт меню подсвечивается как надо, но когда мышку сдвигается с верхней панели с вкладками браузера на страничку будущего сайта, то подсветка пункта пропадает. Наверное что-то не то с моими ссылками <li><a href="/OSPanel/domains/cover-mania2.loc/for_us.html">о нас</a></li>

30.03 в 17:47
  • 0
Проверенный  |  10

Смпасибо, Артём! Частично получилось. Когда нажимаю на пункт меню, то меня выкидывает на экран с надписью

Object not found!

The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

If you think this is a server error, please contact the webmaster.

Error 404

cover-mania2.loc

Apache

30.03 в 17:44
  • 0
Администратор  |  725

Амир Минсафин, И вот тут ошибка:

.nov li:active a{

Должно быть:

.nov li.active a{

30.03 в 15:21
  • 1
Администратор  |  725

Амир Минсафин, попробуйте скрипт подсветки меню вставить перед </body>

30.03 в 15:10
  • 1
Проверенный  |  10

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1"> <!--Адаптация вёрстки-->

<meta property="og:url" content="">

<meta property="og:type" content="website">

<meta property="og:title" content="Интернет-магазин">

<meta property="og:image" content="">

<meta property="og:site_name" content="Cover-Mania">

<meta property="article:author" content="Амир Минсафин">

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic" rel="stylesheet">

<title>Cover-Mania</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

<script type="text/javascript" src="js/functions.js"></script>

<script type="text/javascript">

window.onload = function () {

//

$(window).scroll(function() {

if ($(this).scrollTop() > 100) {

if ($('#toTop').is(':hidden')) {

$('#toTop').css({opacity : 1}).fadeIn('slow');

}

} else { $('#toTop').stop(true, false).fadeOut('fast'); }

});

$('#toTop').click(function() {

$('html, body').stop().animate({scrollTop : 0}, 300);

});

}

</script>

<script>

$(function() {

var pathname_url = window.location.pathname;

var href_url = window.location.href;

$(".nov li").each(function () {

var link = $(this).find("a").attr("href");

if (pathname_url == link || href_url == link) {

$(this).addClass("active");

}

});

});

</script>

</head>

30.03 в 14:53
  • 0
Проверенный  |  10

Здравствуйте, Артём! Я начинающий в вёрстке, так что не судите строго пожалуйста. Работаю над меню, применил ваш метод, но не получается. Подскажите пожалуйста, что делаю не так.

<div class="novig-display">

<ul class="nov">

<li><a href="/">главная</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/for_us.html">о нас</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/news.html">новости</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/Payment_delivery.html">оплата и доставка</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/guarantees.html">гарантии</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/discounts.html">скидки</a></li>

<li><a href="/OSPanel/domains/cover-mania2.loc/contacts.html">контакты</a></li>

</ul>

</div>

.nov a{

font-size: 2rem;

font-weight: 800;

text-decoration: none;

color: #FD6930;

border-radius: 20px;

padding: 0 0.5rem 0 0.5rem;

display: block;

}

.nov a:hover {

color: #374483;

background: /*#FF8253;*/url(../images/nov-li-bg.jpg);

transition: 0.6s;

}

.nov li:active a{

color: #374483;

background: url(../images/nov-li-bg.jpg);

transition: 0.6s;

}

30.03 в 14:52
  • 0
Гости  |  679

Спасибо большое, всё заработало

26.08 в 12:49
  • 0
Администратор  |  725

Daniil Ermolov, уверены?

А если так:

.menu-main .current a, .menu-main a:hover {color: #feb386 !important;}

25.08 в 23:21
  • 0
Гости  |  679

Спасибо, но не помогло, к сожалению(

25.08 в 22:36
  • 0
Администратор  |  725

Daniil Ermolov, строку:

.menu-main a.current, .menu-main a:hover{color: #feb386;}

замените на:

.menu-main .current a, .menu-main a:hover {color: #feb386;}

25.08 в 21:17
  • 0
Гости  |  679

Здравствуйте. Подскажите, что не так в моем коде? css у меня другой, но никак не могу сделать выделенную вкладку меню, на которой нахожусь

Вот html

<nav class="top-menu">

<ul class="menu-main">

<li><a href="/forum/lenta/">Все статьи</a></li>

<li><a href="/forum/lenta/categories/novosti.1/">Кейсы</a></li>

</ul>

</nav>

Вот Css

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');

.menu-main {

list-style: none;

margin: 0px 0 20px;

padding: 25px 0 5px;

text-align: center;

background: white;

}

.menu-main li {display: inline-block;}

.menu-main li:after {

content: "|";

color: #606060;

display: inline-block;

vertical-align:top;

}

.menu-main li:last-child:after {content: none;}

.menu-main a {

text-decoration: none;

font-family: 'Ubuntu Condensed', sans-serif;

letter-spacing: 2px;

position: relative;

padding-bottom: 20px;

margin: 0 34px 0 30px;

font-size: 17px;

text-transform: uppercase;

display: inline-block;

transition: color .2s;

}

.menu-main a, .menu-main a:visited {color: #9d999d;}

.menu-main a.current, .menu-main a:hover{color: #feb386;}

.menu-main a:before,

.menu-main a:after {

content: "";

position: absolute;

height: 4px;

top: auto;

right: 50%;

bottom: -5px;

left: 50%;

background: #feb386;

transition: .8s;

}

.menu-main a:hover:before, .menu-main .current:before {left: 0;}

.menu-main a:hover:after, .menu-main .current:after {right: 0;}

@media (max-width: 550px) {

.menu-main {padding-top: 0;}

.menu-main li {display: block;}

.menu-main li:after {content: none;}

.menu-main a {

padding: 25px 0 20px;

margin: 0 30px;

}

}

А вот JS

<script>

$(function() {

var pathname_url = window.location.pathname;

var href_url = window.location.href;

$('.menu-main li').each(function () {

var link = $(this).find('a').attr('href');

if (pathname_url == link || href_url == link) {

$(this).addClass('current');

}

});

});

</script>

Использую класс current по аналогии с вашим active, но ничего не происходит

25.08 в 19:53
  • 0
Администратор  |  725

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

14.06 в 12:43
  • 0
Гости  |  679

эх... Видимо не понятно объяснил( По другому не знаю как объяснить(((

14.06 в 06:10
  • 0
Администратор  |  725

Андрей, вот что я придумал на скорую руку:

var pattern = '/page-';

if(pathname_url.indexOf(pattern) !== -1) {

var from = pathname_url.search('/page-');

var pathname_url = pathname_url.substring(0, from);

}

Код вставлять сразу после строчки:

var href_url = window.location.href;

13.06 в 22:39
  • 0
Администратор  |  725

Андрей, ожидайте. Постараюсь помочь.

13.06 в 22:14
  • 0
Гости  |  679

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

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

Надеюсь понятно будет

13.06 в 22:10
  • 0
Администратор  |  725

Андрей, Не совсем понял.

Чтобы перейдя по пагинации все равно подсвечивался /category/2/ ?

13.06 в 21:55
  • 0
Гости  |  679

не поможете?:((

13.06 в 21:39
  • 0
Гости  |  679

Блин,еще раз спасибо, опять помог ваш сайт (я писал первый комментарий "андрей")..

2 дня с yii2 бился, не мог поставить active, но все уже заработало.

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

Url такой имя сайта/category/2/page-2 , без /page-2 все отлично работает. Повторюсь, сайт на yii2.. Запутался уже((

13.06 в 15:48
  • 1
Гости  |  679

Возникли трудности на DLE c первым вариантом но вариант с под категориями работает отлично )

Жаль что подсветка только когда на категории и неизвестно будет ли светиться когда будешь на 2 или 15 странице.

Но самое обидное что когда находишься в новости этой категории она не подсвечивается. А с этим немного теряется полезность ( Можно сделать чтобы цвет держался пока ты не только в разделе но и в новости этого раздела?

22.04 в 20:06
  • 0
Гости  |  679

Да, спасибо, разобрался, сделал чуть иначе -

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

.closest(selector, [context]) - возвращает первый ближайший родительский узел

16.01 в 19:58
  • 0
Администратор  |  725

АлексСВАО, Попробуйте так.

Меню:

<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" тоже подсветится.

16.01 в 15:33
  • 12
Гости  |  679

и да, <li class="vertical_list"> не одно, а то было бы слишком легко ....

16.01 в 15:15
  • 0
Гости  |  679

А если меню многоуровневое, то как посветить одновременно главный пункт меню и его подменю

например чтобы находясь на странице подменю п.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>

16.01 в 14:01
  • 0
Администратор  |  725

Павел, Здравствуйте.

Четыре комментария выше похожая структура у человека - и все работает. Перепроверьте структуру на своем сайте или скиньте адрес сайта где наблюдается проблема - постараюсь помочь.

19.12 в 12:45
  • 5
Гости  |  679

Привет, Артем! Все отлично работает на уровне http://domain.com/manual_therapy/ , но когда ссыль такого вида http://domain.com/manual_therapy/examples.html , не подсвечивает. Как быть?

19.12 в 08:07
  • 1
Гости  |  679

Братка спасибо все ясно и понятно с первого раза заработало!

9.11 в 00:36
  • 1
Гости  |  679

Спасибо огромное! Все сразу заработало!))

7.10 в 11:39
  • 1
Администратор  |  725

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

<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>

То есть без /../../ и т.д. И тогда все будет работать.

7.10 в 11:36
  • 6
Гости  |  679

Добрый день, не получается подключить скрипт. Сайт у меня на 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;

}

Пока разбираюсь со вторым примером, так как на него много решений в поисковике, но они не помогают(

7.10 в 10:25
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера