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

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

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

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

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

Наша задача.

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

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

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

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

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

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

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

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

 

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Настраиваем файл robots.txt для WordPress

В этой статье пример оптимального, на мой взгляд, кода для файла robots.txt под WordPress, который …

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

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