[Из песочницы] Инструмент для подсветки активного пункта простого HTML меню27.05.2014 00:48

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

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

Current link

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

Текущая ссылка (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:

Current link

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

Parent link

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

Current link

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 (тут нужно будет немного подумать).Кому интересно — вот код, который отвечает за работу фильтров и функций, чтобы долго не искали.Всем спасибо за внимание и приятной работы!