Чуть ли не каждое меню, прорисованное дизайнером в макете, имеет чуть иное отображения для текущего пункта меню, на котором в данный момент находится пользователь. Это элементарные приемы для повышения юзабилити. Чаще всего такие активные пункты меню стараются как то выделить цветом.
Меню обычно принято реализовывать на ненумерованном списке <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 и доступен для скачивания:
Установка
Проще всего установить последнюю на сегодня версию ActiveMenuItemBundle к проекту на Symfony с помощью Composer:
{
"require": {
"bw/active-menu-item-bundle": "1.1.*@dev"
}
}
а после — зарегистрировать бандл в app/AppKernel.php:
public function registerBundles()
{
$bundles = array(
// other bundles...
new BWActiveMenuItemBundleBWActiveMenuItemBundle(),
);
Использование
Теперь у вас в 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 (тут нужно будет немного подумать).
Кому интересно — вот код, который отвечает за работу фильтров и функций, чтобы долго не искали.
Всем спасибо за внимание и приятной работы!
Автор: bocharsky_bw
