Как выделить активный пункт меню на JQuery — Сайт под ключ

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

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

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

Мы всегда отвечаем на вопросы наших читателей, поэтому если у вас есть вопросы по разработке сайтов, то обязательно напишите об этом в комментариях!

Подобный функционал недавно реализовал и я при разработке нового сайта. Советую использовать подобную фичу и вам. Ведь она повышает юзабилити и помогает лучше ориентироваться на сайте вашим посетителям.

Допустим, у нас имеется такое меню:

<ul class="custom-menu-two">
	<li><a class="portmenu" href="/">Home</a></li>
	<li data-tab="menu-catalog"><a href="/catalog/">Catalog</a></li>
	<li><a class="portmenu" href="/blog/">Blog</a></li>
	<li><a class="portmenu" href="/contact-us/">Contact</a></li>
</ul>

Нам необходимо сверить текущий URL страницы с URL, указанными в пунктах меню. При полном совпадении URL-адресов мы присваиваем класс “active” и активируем стиль для выделения соответствующего пункта. Залезем в файл с JS-кодом и добавим следующую функцию.

$(".custom-menu-two .portmenu").each(function(index){
    if ($(this).attr("href") == document.location.pathname) {
      $(this).addClass("active");
    }
});

Сохраним файл и проверим результат в браузере. Если класс active добавляется, значит, вы все сделали правильно!

Как видим, теперь активному пункту меню присваивается класс “active”. Что делать дальше? Я реализовал подчеркивание с помощью псевдоэлемента After.

.custom-menu-two li a.active:after {
   position: absolute;
   content: "";
   height: 2px;
   background-color: #e4e4e4;
   width: 100%;
   bottom: 0;
   left: 0;
   padding: 0 1.5rem;
}

Помог материал или нужна помощь? Обязательно напишите об этом в комментариях! Не забывайте, что у нас есть и группа в Вконтакте, в которой мы также делимся знаниями со своей аудиторией! А еще у нас есть беседа, в которой мы постоянно общаемся, присоединяйтесь!

Поддержать нашу команду:
1 комментарий

Класс, спасибо, что делитесь ценной информацией безвозмездно. Жду новых публикаций, так как ушел в тему разработки с головой. Хочу сделать свой сайт с хорошим функционалом и продающим дизайном.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Привет! Интересно читать нас? Уделите пару минут своего времени, узнайте больше о нашей команде!

Получить подарок!