Инструмент для подсветки активного пункта простого HTML меню
Чуть ли не каждое меню, прорисованное дизайнером в макете, имеет чуть иное отображения для текущего пункта меню, на котором в данный момент находится пользователь. Это элементарные приемы для повышения юзабилити. Чаще всего такие активные пункты меню стараются как то выделить цветом.
Меню обычно принято реализовывать на ненумерованном списке , а для того чтобы сделать текущий пункт меню активным — к нему добавляют классы current active :
- Текущая ссылка (current) — пункт меню, на котором сейчас находится пользователь
- Активные ссылки (active) — пункты меню, которые являются родительскими относительно текущего пункта меню, на котором сейчас находится пользователь
Конечно если вы используете Symfony — у вас есть возможность использовать KNPMenuBundle , где есть возможность настроить подсветку активного пункта, хотя если вы делаете это в первый раз — может показаться сложновато. Но елси у вас простенькое HTML меню всего с несколькими уровнями вложенности и вам лень переносить его в ООП меню типа KNPMenuBundle , предлагаю библиотеку ActiveMenuItemBundle, которая вам поможет в подсветке текущего пункта меню.
Установка
Проще всего установить последнюю на сегодня версию ActiveMenuItemBundle к проекту на Symfony с помощью Composer:
а после — зарегистрировать бандл в app/AppKernel.php :
public function registerBundles() < $bundles = array( // other bundles. new BW\ActiveMenuItemBundle\BWActiveMenuItemBundle(), ); Использование
Теперь у вас в Twig-шаблонах доступно несколько новых фильтров и функций, которые помогут определить активный пункт меню.
Для того чтобы проверить совпал ли роут пункта меню с текущим роутом, используйте is_active фильтр.
Пример 1:
Если роут совпал — фильтр вернет строку current active .
Для родительского пункта многоуровнего меню, чтобы проверить, совпал ли текущий роут с дочерними его подпунтами — используйте is_active функцию, передав в нее массив дочерних роутов первым аргументом, и роут данного пункта меню вторым аргументом.
Пример 2:
Если совпал роут child_route_2 для ссылки Current link , то ей присвоитяся классы current active , а ее родителю с роутом parent_route будет присвоен только класс active .
Если вам нужно вместо роутов работать с request URI — используйте is_active_uri фильтр и is_active_uri функцию, которые работают точно также, ео передавать в них нужно request URI, который можно сгенерировать функцией path , поставляемой из коробки Symfony.
Пример 3:
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. Я понимаю, стрелочки легко нажимать, но если уж минусите — то, пожалуйста, потрудитесь в комментариях описать почему.
Инструмент для подсветки активного пункта простого HTML меню
Чуть ли не каждое меню, прорисованное дизайнером в макете, имеет чуть иное отображения для текущего пункта меню, на котором в данный момент находится пользователь. Это элементарные приемы для повышения юзабилити. Чаще всего такие активные пункты меню стараются как то выделить цветом.
Меню обычно принято реализовывать на ненумерованном списке , а для того чтобы сделать текущий пункт меню активным — к нему добавляют классы current active :
- Текущая ссылка (current) — пункт меню, на котором сейчас находится пользователь
- Активные ссылки (active) — пункты меню, которые являются родительскими относительно текущего пункта меню, на котором сейчас находится пользователь
Конечно если вы используете Symfony — у вас есть возможность использовать KNPMenuBundle , где есть возможность настроить подсветку активного пункта, хотя если вы делаете это в первый раз — может показаться сложновато. Но елси у вас простенькое HTML меню всего с несколькими уровнями вложенности и вам лень переносить его в ООП меню типа KNPMenuBundle , предлагаю библиотеку ActiveMenuItemBundle, которая вам поможет в подсветке текущего пункта меню.
Установка
Проще всего установить последнюю на сегодня версию ActiveMenuItemBundle к проекту на Symfony с помощью Composer:
а после — зарегистрировать бандл в app/AppKernel.php :
public function registerBundles() < $bundles = array( // other bundles. new BW\ActiveMenuItemBundle\BWActiveMenuItemBundle(), ); Использование
Теперь у вас в Twig-шаблонах доступно несколько новых фильтров и функций, которые помогут определить активный пункт меню.
Для того чтобы проверить совпал ли роут пункта меню с текущим роутом, используйте is_active фильтр.
Пример 1:
Если роут совпал — фильтр вернет строку current active .
Для родительского пункта многоуровнего меню, чтобы проверить, совпал ли текущий роут с дочерними его подпунтами — используйте is_active функцию, передав в нее массив дочерних роутов первым аргументом, и роут данного пункта меню вторым аргументом.
Пример 2:
Если совпал роут child_route_2 для ссылки Current link , то ей присвоитяся классы current active , а ее родителю с роутом parent_route будет присвоен только класс active .
Если вам нужно вместо роутов работать с request URI — используйте is_active_uri фильтр и is_active_uri функцию, которые работают точно также, ео передавать в них нужно request URI, который можно сгенерировать функцией path , поставляемой из коробки Symfony.
Пример 3:
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. Я понимаю, стрелочки легко нажимать, но если уж минусите — то, пожалуйста, потрудитесь в комментариях описать почему.
Как выделить активный пункт меню?
Подскажите как сделать так чтобы выделялась только одна кнопка изменю , а у остальных кнопок именялся цвет вот так ;
/* menu styles */ .menu < background-color: #2F4F4F; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24); >.menu__list < text-align: center; padding-left: 0; margin-top: 0; margin-bottom: 0; list-style: none; >.menu__link < display: block; padding: 0.7rem 0rem; will-change: color; transition: color .25s ease-out; font-weight: 0; color: #fff; text-decoration: none; text-transform: uppercase; >/* наложение рамки */ .menu__link:focus < outline: 5px solid #98FB98; display: block; >@media (min-width: 601px) < .menu__list< display: flex; >.menu__group < flex-grow: 1; >.menu__link < position: relative; overflow: hidden; >/* фон полоски подсветки */ .menu__link:before, .menu__link:after < content: ""; width: 0; height: 5px; background-color: #008000; will-change: width; transition: width .05s ease-out; position: absolute; bottom: 0; >.menu__link:before < left: 50%; transform: translateX( -50%); >.menu__link:after < right: 50%; transform: translateX(50%); >.menu__link:hover:before, .menu__link:hover:after < width: 100%; transition-duration: .0s; >> /* hover effect */ .menu:hover .menu__link:not(:hover) < color: #000000; >/* Patreon */ .patreon < width: 0%; padding-top: 70px; padding-bottom: 230px; text-align: center; background-color: #800000; position: absolute; top: 0; left: 0; >.patreon__container < padding-left: 0px; padding-right: 0px; >.patreon__link
Фиксированное меню с подсветкой активного пункта
В данной статье мы рассмотрим как создать фиксированное меню с подсветкой активного пункта меню при прокрутке страницы.
Для крупных справочников, документаций и прочих сайтов с большим количеством информации на одной странице особо остро возникает необходимость качественной навигации. Зачастую данную проблему пытаются решить с помощью «ссылок-якорей», но этого всё равно недостаточно.
Пример фиксированного меню:
Создание фиксированного меню
Создаём структуру нашей страницы. Для удобства верстки я подключил bootstrap
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
Добавляем стили к нашим блокам:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
#block1{ height: 400px; width:100%; display: block; background-color: #ffa2a2; } #block2{ height: 400px; width:100%; display: block; background-color: #b4ffb4; } #block3{ height: 400px; width:100%; display: block; background-color: #6f6fff; } #block4{ height: 400px; width:100%; display: block; margin-bottom:500px; background-color: #ccc; } .nav-pills.nav-stacked{ position: fixed; right:0px; top:0px; }
Отлично. Наша страница готова, осталось добавить эффект смены активного пункта при прокрутке страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
$(document).ready(function () { function Scroll_block(){ var scroll_top = $(document).scrollTop(); $(".right-fixed-menu a").each(function(){ var hash = $(this).attr("href"); var target = $(hash); if (target.position().top scroll_top && target.position().top + target.outerHeight() > scroll_top) { $(".right-fixed-menu li.active").parent().removeClass("active"); $(this).parent().addClass("active"); } else { $(this).parent().removeClass("active"); } }); } $(document).on("scroll", Scroll_block); $("a[href^=#]").click(function(e){ e.preventDefault(); $(document).off("scroll"); $(".right-fixed-menu li.active").parent().removeClass("active"); $(this).parent().addClass("active"); var hash = $(this).attr("href"); var target = $(hash); $("html, body").animate({ scrollTop: target.offset().top }, 500, function(){ window.location.hash = hash; $(document).on("scroll", Scroll_block); }); }); });
Готово. Теперь, несмотря на большое количество информации, посетителям будет удобнее ориентироваться в вашем сайте.