Подсветка пунктов меню javascript

Однажды прочитал в блоге Виталия Гребенникова о способе подсветки активного пункта меню реализованный на javascript.

Идея скрипта хорошая и первое время меня всё устраивало, но потом решил доработать под свои нужды. К тому же в комментариях к той статье народ писал о своих проблемах и потребностях в функционале...

Моя версия подсвечивает не только точное совпадение пунктов меню с текущим URL, но и в случае частичного совпадения URL.

Например пункт меню, ведущий на /blog/ подсветится на следующих страницах:

  • /blog/
  • /blog/1945/05/09/berlin
  • /blog/vsya-pravda-o-nlo-shok

Собственно вот скрипт:


$(function(){
    var url = window.location.pathname.split("/");
    var menuItems = $('.nav li a');
    var activated = false;

    while(url.length) {
        u = url.join("/");
        menuItems.each(function() {
            if(u === this.pathname){
                $(this).parent().addClass('active');
                activated = true;
            }
        });

        if (activated) {
            break;
        } else {
            url.pop(); // remove "" element
            url.pop();
            url.push(""); // add "" element
        }
    }
});

Как видно из третьей строки:

var menuItems = $('.nav li a');

по умолчанию, скрипт натравливается на подобную структуру меню:

<ul class="nav">
    <li><a href="/">Главная</a></li>
    <li><a href="/blog/">Мой блог</a></li>
    <li><a href="/portfolio/">Портфолио</a></li>
    <li><a href="/contacts/">Контакты</a></li>
</ul>

Класс active присваевается элементу <li>. (Это сделано для совместимости с Twitter Bootstrap 3)

Но ничто не мешает вам кастомизировать поведение.

blog comments powered by Disqus
π