Подсветка активного пункта меню с помощью jQuery
Подсветка активного пункта меню с помощью jQuery и JavaScript (самый простой способ определения ссылки текущей страницы). А так же реализуем подсветку текущего пункта меню при скролле.
Содержание:
- Активный пункт одноуровнего меню (jQuery);
- Вложенный активный пункт меню (jQuery);
- Активный пункт меню (нативный JavaScript);
- Активный пункт при прокрутке страницы (jQuery).
Выделение активного пункта меню
HTML:
<nav class="main-menu">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/advantages">Преимущества</a></li>
<li><a href="/services">Услуги</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>jQuery:
jQuery(() => {
$(".main-menu [href]").each(function () {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});Осталось стилизовать активный пункт меню
a.active {
color: #654321;
}Выделение вложенного пункта меню
Первый вариант отлично работает для одноуровнего меню. Но если путь будет например такой:
/blog/coding/2019-01-19-podsvetka-aktivnogo-punkta-menyu-s-pomoshhyu-jquery.htmlТо первый вариант нам не подойдёт. Чтобы реализовать подсветку для вложенного активного пункта меню нужно использовать следующий jQuery код
$(".main-menu a").each(function () {
if ((window.location.pathname.indexOf($(this).attr("href"))) > -1) {
$(this).addClass("active");
}
});Активный пункт меню с помощью JavaScript
Чтобы найти активный пункт меню на чистом JavaScript, воспользуйтесь следующим кодом:
document.querySelectorAll(".menu a").forEach((el) => {
if (window.location.pathname.indexOf(el.getAttribute("href")) > -1) {
el.classList.add("active");
}
});Подсветка активного пункта меню при скролле
Теперь реализуем подсветку текущего пункта меню при прокрутке страницы.
<section class="section hero" id="hero">
<nav class="menu">
<ul>
<li><a href="#hero" class="active">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#why">Почему мы</a></li>
<li><a href="#map">Мы на карте</a></li>
</ul>
</nav>
</section>
<section class="section about" id="about"></section>
<section class="section why" id="why"></section>
<div class="section map" id="map"></div>Стили для активного пункта меню при нажатии и прокрутке:
.menu a.active, .menu a:hover {
text-decoration: underline;
}Обратите внимание, должен быть подключен jQuery.
jQuery(($) => {
const section = $(".section");
const nav = $(".menu");
const navHeight = nav.outerHeight(); // получаем высоту навигации
// поворот экрана
window.addEventListener("orientationchange", () => {
navHeight = nav.outerHeight();
}, false);
$(window).on("scroll", () => {
const position = $(this).scrollTop();
section.each(function () {
const top = $(this).offset().top - navHeight - 5,
bottom = top + $(this).outerHeight();
if (position >= top && position <= bottom) {
nav.find("a").removeClass("active");
section.removeClass("active");
$(this).addClass("active");
nav.find("a[href='#' + $(this).attr('id') + ']'").addClass("active");
}
});
});
nav.find("a").on("click", function () {
const id = $(this).attr("href");
$("html, body").animate({
scrollTop: $(id).offset().top - navHeight
}, 487);
return false;
});
});Может быть полезно:
- Шпаргалка по jQuery
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: