Инструмент для подсветки активного пункта простого HTML меню

Чуть ли не каждое меню, прорисованное дизайнером в макете, имеет чуть иное отображения для текущего пункта меню, на котором в данный момент находится пользователь. Это элементарные приемы для повышения юзабилити. Чаще всего такие активные пункты меню стараются как то выделить цветом.

Меню обычно принято реализовывать на ненумерованном списке <ul></ul>, а для того чтобы сделать текущий пункт меню активным — к нему добавляют классы current active:

<li class="current active">     <a href="#link">Current link</a> </li> 

На самом деле принято выделять два освновных типа ссылок, которые нужно подсвечивать:

• Текущая ссылка (current) — пункт меню, на котором сейчас находится пользователь
• Активные ссылки (active) — пункты меню, которые являются родительскими относительно текущего пункта меню, на котором сейчас находится пользователь

Конечно если вы используете Symfony — у вас есть возможность использовать KNPMenuBundle, где есть возможность настроить подсветку активного пункта, хотя если вы делаете это в первый раз — может показаться сложновато. Но елси у вас простенькое HTML меню всего с несколькими уровнями вложенности и вам лень переносить его в ООП меню типа KNPMenuBundle, предлагаю библиотеку ActiveMenuItemBundle, которая вам поможет в подсветке текущего пункта меню.

Проект является open source, распростараняется по лицензии MIT и доступен для скачивания:

• GitHub
• Packagist

Установка

Проще всего установить последнюю на сегодня версию ActiveMenuItemBundle к проекту на Symfony с помощью Composer:

{     "require": {         "bw/active-menu-item-bundle": "1.1.*@dev"     } } 

а после — зарегистрировать бандл в app/AppKernel.php:

public function registerBundles() {     $bundles = array(         // other bundles...         new BW\ActiveMenuItemBundle\BWActiveMenuItemBundle(),     ); 

Использование

Теперь у вас в Twig-шаблонах доступно несколько новых фильтров и функций, которые помогут определить активный пункт меню.

Для того чтобы проверить совпал ли роут пункта меню с текущим роутом, используйте is_active фильтр.
Пример 1:

<li class="{{ 'route_name'|is_active }}">     <a href="{{ path('route_name') }}">Current link</a> </li> 

Если роут совпал — фильтр вернет строку current active.

Для родительского пункта многоуровнего меню, чтобы проверить, совпал ли текущий роут с дочерними его подпунтами — используйте is_active функцию, передав в нее массив дочерних роутов первым аргументом, и роут данного пункта меню вторым аргументом.
Пример 2:

<li class="{{ is_active(['child_route_1', 'child_route_2'], 'parent_route') }}">     <a href="{{ path('parent_route') }}">Parent link</a>     <ul>         <li class="{{ 'child_route_1'|is_active }}">             <a href="{{ path('child_route_1') }}">Child link</a>         </li>         <li class="{{ 'child_route_2'|is_active }}">             <a href="{{ path('child_route_2') }}">Current link</a>         </li>     </ul> </li> 

Если совпал роут child_route_2 для ссылки Current link, то ей присвоитяся классы current active, а ее родителю с роутом parent_route будет присвоен только класс active.

Если вам нужно вместо роутов работать с request URI — используйте is_active_uri фильтр и is_active_uri функцию, которые работают точно также, ео передавать в них нужно request URI, который можно сгенерировать функцией path, поставляемой из коробки Symfony.
Пример 3:

<li class="{{ path('route_name')|is_active_uri }}">     <a href="{{ path('route_name') }}">Current link</a> </li> 

Demo

Для просмотра демо примера — нужно импортировать роутинг в файле app/config/routing_dev.yml для dev режима:

bw_active_menu_item:     resource: "@BWActiveMenuItemBundle/Resources/config/routing.yml"     prefix:   /bw/demo/active-menu-item 

Потом запустить встроенный сервер php app/console server:run в dev режиме и перейти по адресу http://localhost:8000/bw/demo/active-menu-item/index. Вот демо код Twig-шаблона.

Вывод

Буду рад если мой бандл кому то пригодится, думаю инструмент получился полезный, простой и имеет отличную производительность для небольших HTML меню. На больших и сложных меню не тестировал, но исходя из простоты и быстроты выполнения кода — должен справляться хорошо, главное принять правильное решение где использовать роуты, а где request URI (тут нужно будет немного подумать).
Кому интересно — вот код, который отвечает за работу фильтров и функций, чтобы долго не искали.

Всем спасибо за внимание и приятной работы!