Подсветка активного пункта меню с помощью jQuery

Подсветка активного пункта меню с помощью jQuery и JavaScript (самый простой способ определения ссылки текущей страницы). А так же реализуем подсветку текущего пункта меню при скролле.

Содержание:

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, воспользуйтесь следующим кодом:

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
admin