Выделяем активный пункт в статическом меню Opencart

Сегодня мы рассмотрим еще один вариант работы с такого рода меню. Как вы знаете, особенно те, кто занимается версткой, часто в дизайне предусмотрено выделение активного пункта меню, но реализовать на практике оказалось такое решение не очень то и просто.

Первое к чему прибегают новички, и это наверное одно из наиболее распространенных заблуждений – это использование псевдоклассов. Так часто можно увидеть темы на форуме, прописал для меню класс, например:

.menu:active

но оно почему-то не работает. Оно и не будет работать, поскольку этот псевдокласс используеться совсем для других целей.

Наша задача.

Для меню вида:

<div id="menu">
  <ul>
<li><a href="#">Главная</a></li>
<li><a class="akc" href="/index.php?route=product/special">Акции<a></li>
<li><a href="/garantiya">Гарантии</a></li>
<li><a href="/oplata">Оплата</a></li>
  </ul>
</div>

Обеспечить присвоение класса для активного пункта меню.

По сути можно использовать скрипт, который будет привязываться к id – меню.

Для того чтобы осуществить эту задачу Вам нужно в файл — /catalog/view/theme/default/template/common/header.tpl, перед закрывающимся тегом , добавить следующий код:

<script type="text/javascript">
$(document).ready(function() { // Когда страница загрузится
    $('.nav li a').each(function () { // получаем все нужные нам ссылки    
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;  // получаем адрес ссылки
        if(location == link) { // при совпадении адреса ссылки и адреса окна
            $(this).addClass('active'); //добавляем класс

        }
    });
})
</script>

Обратите особое внимание на параметр #menu в четвертой строчке, если у вас другое значение, обязательно поменяйте его, иначе ничего работать не будет. После проведенной работы на выходе вы получите меню, активные пункты которого будут получать класс – activeCSS. Можете добавить следующий код в файл — /catalog/view/theme/default/stylesheet/ stylesheet.css:

.activeCSS {
Font-weight:bold;
}

для того чтобы изменения были видны на так сказать «на лицо».

Нужно выделить и родителей ?
Если у вас древовидное меню, бывает, нужно выделить не только текущую ссылку но и ссылки родительских разделов, для этого используем метод Match(). Код будет таким:

$(function () {                             // когда страница загружена
    $('.lmenu a').each(function () {    // проходим по нужным нам ссылками
        var location = window.location.href // переменная с адресом страницы
        var link = this.href                // переменная с url ссылки
        var result = location.match(link);  // результат возвращает объект если совпадение найдено и null при обратном

        if(result != null) {                // если НЕ равно null
            $(this).addClass('current');    // добавляем класс
        }
    });
});

Нужно добавить ID а не CASS ?

$(this).attr('id','style1') ;