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

Выделяем активный пункт в статическом меню 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">
jQuery(document).ready(function($) {
var url=document.location.href;
$.each($("#menu a"),function(){
if(this.href==url){$(this).addClass('activeCSS');};
});
})(jQuery);
</script>

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

.activeCSS {
Font-weight:bold;
}

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

На этом сегодня все, подписывайтесь на новости моего блога, впереди у нас еще много чего интересного. Я буду постоянно выкладывать различные полезные фишки для создания как коммерческих, так и информационных интернет проектов. До связи.

5 комментариев

  1. Огромное спасибо за статью. Очень полезная информация для новичков (думаю и не только).
    Есть один конкретный вопрос: пытался обозначить таким образом пункт раскрывающегося меню списка категорий товаров в вертикальном меню в левой колонке. Изначально модуль сделан так, что при переходе на нужный пункт меню сворачивается до категорий 1го уровня, вследствие чего активный пункт не виден. Как можно сделать так, чтобы список подкатегорий с активной категорией был развернутым при переходе на страницу с данной категорией?
    Заранее спасибо.
    P.S. Сильно не ругайтесь, я только учусь работе с Opencart, а с JQuery вообще очень слабо знаком.

  2. Влад, у Вас немного не тот случай, что описан в статье. На данный момент я не занимаюсь правкой чужих сайтов. У Вас установлен скрипт (вероятно шел с шаблоном), вам нужно посмотреть, возможно он широко используется другими пользователями, и если это массовый продукт, а не самопис, то можно найти параметры, которые к нему подключаются. Возможно таким образом вы сможете решить вашу проблему.

  3. Какая же глупость делать это через js.

  4. Здравствуйте! Всё здорово подсвечивается! Но если выбираем дочерний пункт меню, то родительский активный не подсвечивается! (т.е. пользователь не видит какой главный пункт меню вызвал эту страницу).
    Подскажите, если можно как такое реализовать?

  5. Дмитрий, поделитесь Вашим решением, с удовольствием приму к сведенью Ваши советы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *