Как сделать, что бы при переходе на второй уровень, третий и т.д. предыдущие ссылки оставались активными.
Ответ написан 1 комментарий
- Первый пункт
- Первый пункт
- Второй пункт
- Второй пункт
Активный пункт меню — весьма востребованное свойство для любого сайта. И в этой статье мы рассмотрим, как можно силами CSS и небольшого кода JavaScript сделать такое весьма значимое решение на Вашем сайте.
Уверен, Вы не раз сталкивались с подобного рода визуальными эффектами на сайтах и хотели бы реализовать данную возможность у Вас на сайте. Нет проблем, эта статья поможет воплотить Вашу мечту в реальность.
Когда-то давным давно я сам задавался этой проблемой, пока не пришел к выводу, что бесполезно искать какие-то сторонние решения и решил создать свой скрипт, который легок для понимания любому мало-мальски подготовленному программисту в JavaScript, легко встраивается в любой шаблон, дизайн, в любую систему управления сайтом, хоть Joomla, хоть WordPress или иные. Итак, представляю Вашему вниманию активный пункт меню CSS и JavaScript.
Для начала подключаем между тегами
и JQuery библиотеку, вот код.Чтобы более наглядно продемонстрировать Вам всю возможность и порядок действий для начала создайте любое меню между тегами , например, вот такое.
Как мы видим из примера это у нас обычное меню, которому мы присвоили класс menu — учтите, Вы можете присваивать такой класс, который Вы считаете нужным, чтобы у Вас не было проблем с одинаковыми классами меню, настоятельно рекомендую использовать уникальные названия классов.
И вот, мы установили такое меню. Теперь наша задача сделать так, можно сказать, представить в голове, а потом кодом, как нам нужно, чтобы выглядел активный пункт меню при нахождении на соответствующей странице. Для этого мы будем использовать CSS и давайте придумаем класс для нашего активного пункта меню и назовем его active. Учтите, Вы можете назвать его как Вашей душе угодно. Вот примерный код.
Заметьте, все, что Вы пишите в CSS, должно относится к нашему пункту меню, который мы хотим сделать активным. Теперь же нам необходимо сделать маленький скрипт, который бы определял, на какой мы находимся странице, а затем при условии, что эта страница равна нашей запрошенной — присваивал нужному нам пункту меню свой класс active. И наш пункт меню бы окрасился в нужным нам цвет, поменял бы шрифт, или сменил background. Ниже код, не забудьте, вставляем его между тегами
Учтите, что у Вас могут возникнуть вопросы — Вы всегда сможете оставить свои комментарии под этой статьей. Удачи в написании отличных менюшек.
Как подсветить какой пункт в меню выбран? Обновлю вопрос, поскольку не нашел ответа. Вот что мне надо! И прошу, не надо писать, что на каждой странице надо вручную переделывать меню.
Дописываете class к пункту и пишете ему css свойства выбранного элемента (тут уже на ваше усмотрение изменить цвет, подчеркнуть и т.д.)
Добавлено из комментария.
Нет это статичный код. Я совсем не это имел ввиду, нужен скрипт что бы выделял так последний нажатый пункт после перехода на страницу, делать так на каждой странице - смешно.
можно сделать с помощью jquery
Добавить класс menu в любое меню на странице(их даже может быть не сколько) и соответственно прописать стили для класса active
Так же вариант в php
а будет ли работать с динамично создаваемыми ссылками? Начало всегда одно, например search.php, а затем к нему плюсуется номер сессии и другое.
Какая бы страница не была, jquery подсветит её, и не нужно заморачиваться с лишний кодом, юзайте jquery, и добавляйте класс menu(можете изменить) во все блоки меню.
Думаю, вы это имеете в виду (тень):
box-shadow:3px 3px #FFFFFF 15px;
То есть класс "active" присвоить родительскому элементу.
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.25.43544
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Чуть ли не каждое меню, прорисованное дизайнером в макете, имеет чуть иное отображения для текущего пункта меню, на котором в данный момент находится пользователь. Это элементарные приемы для повышения юзабилити. Чаще всего такие активные пункты меню стараются как то выделить цветом.
Меню обычно принято реализовывать на ненумерованном списке , а для того чтобы сделать текущий пункт меню активным — к нему добавляют классы 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:
Для просмотра демо примера — нужно импортировать роутинг в файле 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. Я понимаю, стрелочки легко нажимать, но если уж минусите — то, пожалуйста, потрудитесь в комментариях описать почему.