как сделать подсветку активного пункта меню

Выделение активного пункта меню с помощью jQuery

Доброго времени суток 🙂

Сегодня мы поговорим о довольно тривиальной задаче – выделении активного пункта меню с помощью jQuery.

Для начала, традиционно, пару слов о том, кому будет полезна данная информация.

В первую очередь, сегодняшняя статья будет бесценной для тех, кто решил создать сайт «с нуля» на чистом php+css+html+javascript или с помощью фреймворков.

Бесценна – потому что в этом случае у вас не будет готового функционала, как у любителей CMS, поэтому выделение активного пункта меню придётся реализовывать самостоятельно.

Но, если вы всё-таки относитесь к фанатам создания сайта на CMS, где данный функционал доступен «из коробки», приводимая далее информация не будет такой уж бесполезной, т.к. никто не сможет вам гарантировать, что устанавливаемый графический шаблон будет без багов 🙂

А бывает, что после установки какого-то модуля, ломается уже существующий функционал…

В общем, принципы организации подсветки активного пункта меню будут полезны всем, без исключения.

К тому же, стоит подчеркнуть, что рассматриваемый нами сегодня способ является кроссплатформенным, поэтому он подойдёт он всем без исключения.

Итак, переходим от лирики к практике.

Постановка задачи

Для начала опишем проблему более детально. Т.е. составим постановку задачи, которая является половиной успеха.

Итак, у нас есть главное меню сайта, которое состоит из пунктов, содержащих ссылки на страницы сайта.

Пункты меню, соответственно, имеют названия, созвучные с названиями страниц сайта.

Для примера возьмём главное меню, характерное для сайтов-визиток:

Как видно на картинке, меню в нашем случае состоит из следующих элементов:

HTML-код нашего меню будет таким:

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

Итак, все исходные данные и то, что должны получить в итоге, мы описали. Переходим к описанию алгоритма и его реализации.

Подсветка активного пункта меню – алгоритм

Итак, как же мы будет выделять текущий элемент? Самый лучший способ – поменять либо цвет его текста, либо фон.

Лично мне больше нравится первый вариант, вы же можете поступить так, как вам нравится.

Для подсветки текущего пункта меню добавим класс, который будет делать текст ссылки, содержащейся в нём, синим:

Сам алгоритм будет достаточно простым:

Подсветка активного пункта меню – варианты реализация

Насчёт языка реализации – проще всего обозначенный алгоритм будет реализовать на JavaScript. В частности, я буду использовать для этого популярную библиотеку jQuery.

Также можно использовать языки бэкэнда, в частности, самый популярный из них – PHP, встраивая PHP-скрипты в шаблон. Но, по мнению сторонников «чистого кода» этот подход не является оптимальным, т.к. засорять HTML-код шаблона логикой приложения – не есть хорошо.

Если же в вашем проекте используются шаблонизаторы (Smarty, Blade, Twig и др.), основным предназначением которых является как раз разделение бизнес-логики от представления за счёт введения своих конструкций, аналогичных функциям языков бкэнда, то PHP-вариант может вам подойти.

Но если проверка переменной и присвоение класса ещё можно сделать директивами шаблонизаторов (не люблю я их, кстати, т.к. не вижу большого отличия чистых php-скриптов от конструкций шаблонизатора, которые ещё выучить нужно), то получение url текущей страницы так просто не сделать.

Как альтернатива – в PHP-варианте можно было бы получение текущего url вынести в отдельный скрипт, который будет возвращать переменную с ним. А в шаблоне нужно было бы сверять с ней ссылки в пунктах меню и в зависимости от результатов присваивать им класс или нет.

Как резюме, — PHP-вариант приведёт вас к громоздкости кода шаблона или необходимости поиска требуемого php-скрипта или прописывании нового для вычисления текущего url и передачи этого значения в шаблон.

В принципе, если вас это не остановит – на PHP или другом языке бэкэнда, который используется у вас в проекте, вы уже сможете реализовать данную функцию самостоятельно, т.к. алгоритм я привел, осталось только перевести его.

Если возникнут какие-то проблемы с кодом – пишите в комментариях, буду рад вам помочь.

Кстати, при подборе ключевых слов для данной статьи, выяснилось, что некоторые люди всерьёз полагают, что выделение активного пункта меню можно сделать с помощью чистого CSS.

Но, хочу сказать, что данное предположение ошибочно, т.к. CSS – это язык оформления документа, в котором не предусмотрен функционал определения текущего url, на основании которого пункт меню может считаться активным.

Поэтому не тратьте время на поиски и используйте либо JS-вариант реализации, которая будет рассмотрена далее, либо бэкэнд-вариацию.

Подсветка активного пункта меню – jQuery реализация

Итак, давайте вместе составим наш jQuery-скрипт для выделения активного пункта меню на основании алгоритма, который был приведён выше.

Для начала создадим функцию, внутри которой мы будем писать наш код. Название для неё необязательно:

Итак, первым делом, определяем url текущей страницы и записываем его в переменную для дальнейшего использования:

Однако, если вывести полученное значение с помощью js-функций alert() или console.log(), то мы увидим полный путь, начинающийся с указания протокола и доменного имени сайта, что нам не нужно.

Наши ссылки в главном меню содержат относительные адреса страниц в формате «/адрес_страницы», что означает их адресацию относительно корня сайта.

Поэтому наша задача – это извлечь из текущего url ту его часть, которая будет сопоставима с адресами ссылок в меню.

Для этого разбиваем url на части, которые отделены друг от друга с помощью символа слэша («/»), выбираем самую последнюю из них и прибавляем ей в начало слэш:

Если вы предполагаете использовать на своём сайте формат относительных ссылок без слэша, то добавлять его не стоит.

Также, если в качестве адресов ссылок вы хотите использовать абсолютные значения, т.е. ссылки на страницы начинаются с указания протокола и доменного имени сайта в формате «http://домен.зона/адрес_страницы», то вышенаписанная строка вам вообще не нужна.

Дальше у нас по плану проверка адресов ссылок в главном меню на соответствие с текущим url. Лучше всего делать это в цикле перебором всех пунктов главного меню.

Поскольку меню имеет class menu, то, благодаря особенностям JavaScript и jQuery, прописываем следующий код цикла.

Теперь главная проверка на соответствие текущего urla и прописанного в качестве адреса ссылки:

В итоге, у нас получился симпатичный и лаконичный скриптик:

Всё, что теперь осталось для реализации подсветки активного элемента меню – это подключить скрипт на наш сайт. Если вы не знаете, как это делается, то хочу порекомендовать вам статью, где это написано, а также содержится ответ на вопрос «На чём написан сайт?».

После произведённых действий активный пункт меню должен выделяться среди остальных подобным образом:

Оставляйте ваши отзывы в комментариях, делитесь данной статьёй со своими друзьями в социальных сетях и не забывайте подписываться на обновления проекта – впереди вас ждёт ещё очень много интересного и увлекательного материала 🙂

На этом сегодняшняя статья подошла к концу. Надеюсь, она была для вас полезной.

P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

И с друзьями не забудьте поделиться 😉

Источник

Подсветка выбранного пункта меню

Как подсветить какой пункт в меню выбран?

Обновлю вопрос, поскольку не нашел ответа.

Вот что мне надо! И прошу, не надо писать, что на каждой странице надо вручную переделывать меню.

4 ответа 4

Дописываете class к пункту и пишете ему css свойства выбранного элемента (тут уже на ваше усмотрение изменить цвет, подчеркнуть и т.д.)

Добавлено из комментария.

можно сделать с помощью jquery

Добавить класс menu в любое меню на странице(их даже может быть не сколько) и соответственно прописать стили для класса active

Так же вариант в php

Думаю, вы это имеете в виду (тень):

То есть класс «active» присвоить родительскому элементу.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.11.17.40769

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Инструмент для подсветки активного пункта простого HTML меню

Установка

Проще всего установить последнюю на сегодня версию ActiveMenuItemBundle к проекту на Symfony с помощью Composer:

а после — зарегистрировать бандл в app/AppKernel.php :

Использование

Теперь у вас в Twig-шаблонах доступно несколько новых фильтров и функций, которые помогут определить активный пункт меню.

Для того чтобы проверить совпал ли роут пункта меню с текущим роутом, используйте is_active фильтр.
Пример 1:

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

Для просмотра демо примера — нужно импортировать роутинг в файле app/config/routing_dev.yml для dev режима:

Вывод

Буду рад если мой бандл кому то пригодится, думаю инструмент получился полезный, простой и имеет отличную производительность для небольших HTML меню. На больших и сложных меню не тестировал, но исходя из простоты и быстроты выполнения кода — должен справляться хорошо, главное принять правильное решение где использовать роуты, а где request URI (тут нужно будет немного подумать).
Кому интересно — вот код, который отвечает за работу фильтров и функций, чтобы долго не искали.

Всем спасибо за внимание и приятной работы!

Источник

Подсветка активного пункта меню на одностраничном сайте (Elementor)

Задача

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

Обещанного три года ждут, а проект сдавать надо, поэтому я начал искать решение самостоятельно. Я нашел несколько решений в интернете, но в итоге подошло мне только одно. В общем нашел только часть решения, а именно код, который работал именно в моем случае с конструктором страниц Елементор.

Решение

И так перейдем к решению нашей задачи. А именно изменим стили активного пункта меню на одностраничном сайте сделанном в Елементоре. Нам потребуется следующий код:

jQuery(document).ready(function(jQuery) <
var topMenu = jQuery(«.jet-nav»),
offset = 35,
topMenuHeight = topMenu.outerHeight()+offset,
// All list items
menuItems = topMenu.find(‘a[href*=»#»]’),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function()<
var href = jQuery(this).attr(«href»),
id = href.substring(href.indexOf(‘#’)),
item = jQuery(id);
//console.log(item)
if (item.length) < return item; >
>);

// Bind to scroll
jQuery(window).scroll(function()<
// Get container scroll position
var fromTop = jQuery(this).scrollTop()+topMenuHeight;

// Get id of current scroll item
var cur = scrollItems.map(function()<
if (jQuery(this).offset().top a > span<
color: #ff6b00;
font-weight: bold;
>

я менял цвет активной ссылки меню и толщину шрифта.

На этом в общем все. Задача решена. Если будут вопросы пишите, что знаю подскажу.

Источник

Сделать подсветку активного меню

Как сделать подсветку меню страницы, на которой находишься?
Добрый день. Сейчас разрабатываю многостраничный сайт. Как сделать так, чтобы страница, на.

Настроить подсветку пункта меню при наведении
Добрый день, коллективный разум! Не могу сделать так, чтобы текст в Меню 1 подсвечивался как в.

Как сделать подсветку
Как делается такая подстветка? скрин приложен. тоесть при наведение подствечивается так.

и в css прописываете нужную подсветку для класса active

Добавлено через 2 минуты
Fedor92, Ваш вариант не сработает, если по клику идет перерисовка страницы, т.е в href прописана отдельная страница для каждого пункта меню.

Сделать подсветку при :hover
Доброго времени суток! Подскажите, пожалуйста, как реализовать подсветку, как на картинке.

Как сделать такую подсветку?
Тут http://smile-shopping.com.ua/ в поиске при нажатие рамка меняет цвет, как так сделать?

Выделение активного раздела в меню
Есть сайт http://www.fmc74.ru/ Слева есть меню: Стационар Травмпункт Поликлиника Как сделать.

Выделение активного пункта меню
Всем доброго времени суток, приношу свои извинения, если это уже обсуждалось, собственно суть.

Выделение активного пункта меню
Вопрос простой. Как мне сделать активный пункт меню? Нужно это для класса top-menu. HTML и CSS.

Источник