Чуть ли не каждое меню, прорисованное дизайнером в макете, имеет чуть иное отображения для текущего пункта меню, на котором в данный момент находится пользователь. Это элементарные приемы для повышения юзабилити. Чаще всего такие активные пункты меню стараются как то выделить цветом.
Меню обычно принято реализовывать на ненумерованном списке , а для того чтобы сделать текущий пункт меню активным — к нему добавляют классы
На самом деле принято выделять два освновных типа ссылок, которые нужно подсвечивать:
Конечно если вы используете Symfony — у вас есть возможность использовать
Проект является open source, распростараняется по лицензии MIT и доступен для скачивания:
Проще всего установить последнюю на сегодня версию
а после — зарегистрировать бандл в
Теперь у вас в Twig-шаблонах доступно несколько новых фильтров и функций, которые помогут определить активный пункт меню.
Для того чтобы проверить совпал ли роут пункта меню с текущим роутом, используйте
Пример 1:
Если роут совпал — фильтр вернет строку
Для родительского пункта многоуровнего меню, чтобы проверить, совпал ли текущий роут с дочерними его подпунтами — используйте
Пример 2:
Если совпал роут
Если вам нужно вместо роутов работать с request URI — используйте
Пример 3:
Для просмотра демо примера — нужно импортировать роутинг в файле
Потом запустить встроенный сервер
Буду рад если мой бандл кому то пригодится, думаю инструмент получился полезный, простой и имеет отличную производительность для небольших HTML меню. На больших и сложных меню не тестировал, но исходя из простоты и быстроты выполнения кода — должен справляться хорошо, главное принять правильное решение где использовать роуты, а где request URI (тут нужно будет немного подумать).
Кому интересно — вот код, который отвечает за работу фильтров и функций, чтобы долго не искали.
Всем спасибо за внимание и приятной работы!
P.S. Я понимаю, стрелочки легко нажимать, но если уж минусите — то, пожалуйста, потрудитесь в комментариях описать почему.
Меню обычно принято реализовывать на ненумерованном списке , а для того чтобы сделать текущий пункт меню активным — к нему добавляют классы
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 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 режиме и перейти по адресу localhost:8000/bw/demo/active-menu-item/index
. Вот демо код Twig-шаблона.Вывод
Буду рад если мой бандл кому то пригодится, думаю инструмент получился полезный, простой и имеет отличную производительность для небольших HTML меню. На больших и сложных меню не тестировал, но исходя из простоты и быстроты выполнения кода — должен справляться хорошо, главное принять правильное решение где использовать роуты, а где request URI (тут нужно будет немного подумать).
Кому интересно — вот код, который отвечает за работу фильтров и функций, чтобы долго не искали.
Всем спасибо за внимание и приятной работы!
P.S. Я понимаю, стрелочки легко нажимать, но если уж минусите — то, пожалуйста, потрудитесь в комментариях описать почему.