Подсветка активного пункта меню с помощью 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>
JavaScript (jQuery):
$(function() {
$('.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 li a').forEach(function(el) {
if ( window.location.pathname.indexOf(el.getAttribute('href')) > -1 ) {
el.classList.add('active');
}
});
Подсветка активного пункта меню при скролле
Теперь реализуем подсветку текущего пункта меню при прокрутке страницы.
Пример HTML структуры
<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(function($) {
const section = $('.section'),
nav = $('.menu'),
navHeight = nav.outerHeight(); // получаем высоту навигации
// поворот экрана
window.addEventListener('orientationchange', function () {
navHeight = nav.outerHeight();
}, false);
$(window).on('scroll', function () {
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.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.