Если вы находитесь на этой статье, то наверняка хотите научиться выделять активный пункт меню, на странице которого находится пользователь.
Мы всегда отвечаем на вопросы наших читателей, поэтому если у вас есть вопросы по разработке сайтов, то обязательно напишите об этом в комментариях!
Подобный функционал недавно реализовал и я при разработке нового сайта. Советую использовать подобную фичу и вам. Ведь она повышает юзабилити и помогает лучше ориентироваться на сайте вашим посетителям.
Допустим, у нас имеется такое меню:
<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;
}
Помог материал или нужна помощь? Обязательно напишите об этом в комментариях! Не забывайте, что у нас есть и группа в Вконтакте, в которой мы также делимся знаниями со своей аудиторией! А еще у нас есть беседа, в которой мы постоянно общаемся, присоединяйтесь!
Понравилась статья? Хотите поддержать нашу команду и не пропустить новые материалы? Тогда подписывайтесь на нашу группу в ВКонтакте или на канал в Телеграм. Там мы не просто уведомляем подписчиков о выходе новых статей, но и делимся результатами различных экспериментов по SEO-продвижению.
Класс, спасибо, что делитесь ценной информацией безвозмездно. Жду новых публикаций, так как ушел в тему разработки с головой. Хочу сделать свой сайт с хорошим функционалом и продающим дизайном.