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

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

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

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

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