Как сделать подсвечивающиеся ссылки в меню
Выделение активного пункта меню с помощью jQuery
Доброго времени суток
Сегодня мы поговорим о довольно тривиальной задаче – выделении активного пункта меню с помощью jQuery.
Для начала, традиционно, пару слов о том, кому будет полезна данная информация.
В первую очередь, сегодняшняя статья будет бесценной для тех, кто решил создать сайт «с нуля» на чистом php+css+html+javascript или с помощью фреймворков.
Бесценна – потому что в этом случае у вас не будет готового функционала, как у любителей CMS, поэтому выделение активного пункта меню придётся реализовывать самостоятельно.
Но, если вы всё-таки относитесь к фанатам создания сайта на CMS, где данный функционал доступен «из коробки», приводимая далее информация не будет такой уж бесполезной, т.к. никто не сможет вам гарантировать, что устанавливаемый графический шаблон будет без багов
А бывает, что после установки какого-то модуля, ломается уже существующий функционал…
В общем, принципы организации подсветки активного пункта меню будут полезны всем, без исключения.
К тому же, стоит подчеркнуть, что рассматриваемый нами сегодня способ является кроссплатформенным, поэтому он подойдёт он всем без исключения.
Итак, переходим от лирики к практике.
Постановка задачи
Для начала опишем проблему более детально. Т.е. составим постановку задачи, которая является половиной успеха.
Итак, у нас есть главное меню сайта, которое состоит из пунктов, содержащих ссылки на страницы сайта.
Пункты меню, соответственно, имеют названия, созвучные с названиями страниц сайта.
Для примера возьмём главное меню, характерное для сайтов-визиток:
Как видно на картинке, меню в нашем случае состоит из следующих элементов:
- Home – при нажатии открывается главная страница сайта, соответственно, ссылка на элементе будет «/»;
- About – содержит ссылку «about», ведёт на соответствующую страницу;
- Services – ссылка «services»;
- Blog – ссылка «blog»;
- Contacts – ссылка «contacts».
HTML-код нашего меню будет таким:
Наша задача будет заключаться в выделении пункта меню, который соответствует текущей странице, т.е. странице, на которой находится пользователь сейчас.
Итак, все исходные данные и то, что должны получить в итоге, мы описали. Переходим к описанию алгоритма и его реализации.
Подсветка активного пункта меню – алгоритм
Итак, как же мы будет выделять текущий элемент? Самый лучший способ – поменять либо цвет его текста, либо фон.
Лично мне больше нравится первый вариант, вы же можете поступить так, как вам нравится.
Для подсветки текущего пункта меню добавим класс, который будет делать текст ссылки, содержащейся в нём, синим:
Сам алгоритм будет достаточно простым:
- Проходимся по всем пунктам меню и для каждого считываем url, на который ведёт ссылка в нём;
- Проверяем url ссылки с url текущей страницы сайта;
- Если значения совпадают – добавляем проверяемому элементу меню класс .current, если нет – проверяем следующий элемент.
Подсветка активного пункта меню – варианты реализация
Насчёт языка реализации – проще всего обозначенный алгоритм будет реализовать на 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 на части, которые отделены друг от друга с помощью символа слэша («/»), выбираем самую последнюю из них и прибавляем ей в начало слэш:
Если вы предполагаете использовать на своём сайте формат относительных ссылок без слэша, то добавлять его не стоит.
Также, если в качестве адресов ссылок вы хотите использовать абсолютные значения, т.е. ссылки на страницы начинаются с указания протокола и доменного имени сайта в формате «https://домен.зона/адрес_страницы», то вышенаписанная строка вам вообще не нужна.
Дальше у нас по плану проверка адресов ссылок в главном меню на соответствие с текущим url. Лучше всего делать это в цикле перебором всех пунктов главного меню.
Поскольку меню имеет class menu, то, благодаря особенностям JavaScript и jQuery, прописываем следующий код цикла.
Доступ к текущему элементу в таком цикле будет осуществляться с помощью конструкции $(this). Соответственно, адрес ссылки, содержащейся в пункте меню, можно получить с помощью следующего кода. Результат также, для удобства, записываем в переменную:
Теперь главная проверка на соответствие текущего urla и прописанного в качестве адреса ссылки:
Как видите, если ссылка является текущим url, то
мы добавляем класс .current для подсветки активного пункта меню.
В итоге, у нас получился симпатичный и лаконичный скриптик:
Всё, что теперь осталось для реализации подсветки активного элемента меню – это подключить скрипт на наш сайт. Если вы не знаете, как это делается, то хочу порекомендовать вам статью, где это написано, а также содержится ответ на вопрос «На чём написан сайт?».
После произведённых действий активный пункт меню должен выделяться среди остальных подобным образом:
Оставляйте ваши отзывы в комментариях, делитесь данной статьёй со своими друзьями в социальных сетях и не забывайте подписываться на обновления проекта – впереди вас ждёт ещё очень много интересного и увлекательного материала 🙂
На этом сегодняшняя статья подошла к концу. Надеюсь, она была для вас полезной.
До новых встреч 😉
P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.
Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.
→ BlogGood.ru ←
Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…
Как на сайте выделить активную ссылку в меню, используя JavaScript и CSS
Совсем недавно, когда создавал сайт под заказ, я столкнулся с маленькой проблемой, которая забрала у меня кучу времени и нервов, чтобы ее решить. Проблема заключалась в том, что заказчик захотел сделать на сайте эффект, чтобы активная ссылка, которая ссылается на текущую страницу в меню, выделялась. Я перелопатил кучу сайтов и форумов, чтобы найти ответ на свой вопрос, и, все-таки, нашел ответ, а что-то пришлось самому додумать. Итак, этот вопрос решается очень быстро и просто и вам не придется искать дополнительную информацию, так как даю полностью готовый скрипт.
Как на сайте выделить активную ссылку в меню на WordPress.
Совсем недавно я рассказывал о том, как задать стиль в пункте меню для текущей страницы созданной на WordPress. Хочу повториться, чтобы все, что касается этой темы, находилось в одной статье.
Заметил я, что WordPress автоматически добавляет класс для активной нажатой ссылки. Это можно посмотреть, если открыть исходный код сайта.
В исходном коде можно увидеть, что к активной ссылке был добавлен класс «current-menu-item». А это значит, что мы можем прописать к этому классу любой стиль.
Пример:
Откройте CSS файл шаблона и впишите вот такой код:
Внимание: Этот код будет работать в том случае, если ваше меню было взято в блок так, как у меня:
Вот такой получился у меня результат, когда я использовал класс «current-menu-item» .
Теперь я поделюсь информацией, как выделить активную ссылку абсолютно для любого сайта, используя всего лишь маленький код JavaScript и CSS.
Как на сайте выделить активную ссылку в меню, используя JavaScript и CSS.
Хочу предложить готовый код на JavaScript, который автоматически будет прописывать класс « act» к активной ссылке меню, которая ссылается на текущую страницу. Этот код легко встраивается в любой дизайн, шаблон и в любую систему управления сайтом CMS (Joomla, WordPress и др.).
Обратите внимание на пункт 5 – 10 в коде.
Здесь вы меняете вид меню, используя знания CSS.
Есть другой способ решение этой проблемы и тоже с использованием JavaScript. Какой способ вам больше нравится, такой и выбирайте.
Обратите внимание на пункт 8 в коде.
Вот и все. Проблема решена. Если у вас что-то не получилось или вы не поняли, пишите в комментариях, отвечу быстро. Ну, все, до скорых встреч.
Спасибо, все работает. Давно искал подобный скрипт. Вот только теперь возникает еще одна проблема, как теперь сделать так чтобы не все ссылки брали данное правило, а только некоторые?
Использовал второй пример.
Опубликовано на Октябрь 28th, 2013
Степан => автор блога говорит:
Пожалуйста, Андрей. По поводу вопроса, вам следует указать указать другой стиль, например так
Опубликовано на Октябрь 28th, 2013
Спасибо тебе, все отлично работает!
Опубликовано на Январь 31st, 2014
Степан => автор блога говорит:
Опубликовано на Февраль 1st, 2014
Отличный скрипт, подскажите как сделать
например menu.php работает
а если будет menu.php?menu=1 то нет. Как сделать что бы читалось только до ?, спс
Опубликовано на Июнь 23rd, 2014
Степан => автор блога говорит:
Женя, я не понял Ваш вопрос?
Опубликовано на Июнь 24th, 2014
Спасибо, просто и работает! То что нужно.
Опубликовано на Июль 9th, 2014
Степан => автор блога говорит:
Опубликовано на Июль 10th, 2014
Степан, огромное спасибо за очень полезную статью! Метод работает, но почему-то только для ссылок вида a href=”/gbook/”, а к ссылкам вида a href=”/price.html” свойство стиля не применяется. Подскажи пожалуйста, что нужно подправить в скрипте?
Опубликовано на Январь 26th, 2015
Степан => автор блога говорит:
Какой способ Вы выбрали?
Опубликовано на Январь 26th, 2015
Выбрал второй способ. Мне удалось решить проблему, просто нужно было задать стиль не для a.act
Опубликовано на Январь 26th, 2015
Большое спасибо. Очень выручил
Пытался решить проблему разными способами и только твой скрипт сработал на WordPress.
Опубликовано на Март 1st, 2015
Степан => автор блога говорит:
Опубликовано на Март 1st, 2015
Спасибо за скрипт. Сработал, но можно ли его улучшить? У меня просто на сайте есть основное меню навигации и на некоторых страницах подменю Как сделать так, чтобы при переходе по пунктам подменю., пункт меню тоже оставался выделенным? (Для реализации выбрал второй вариант)
Опубликовано на Март 19th, 2015
Степан => автор блога говорит:
Пожалуйста, Рома!
Напишите ваш код меню (можете его укоротить до макс.).
Опубликовано на Март 20th, 2015
Опубликовано на Март 20th, 2015
Для реализации этого, Вам нужно учесть структуру вложенности меню. В WordPress в таблице term_taxonomy указываются родительские категории для каждой подкатегории.
Т.е. нужно при каждом заходе на страницу подкатегории проверять какой категории она принадлежит и формировать меню в соответствии с этими данными.
Приблизительно это должно выглядеть так (на php):
1. Делаем запрос к БД. Находим категорию, которой принадлежит подкатегория.
Записываем ее в переменную $res.
2. Находим в списке категорий ту, что записана в $res и формируем меню.
Т.е. при совпадении категорий меняем стиль тега.
где punkt – это любые Ваши теги. В данном случае у Вас ,
$cat – массив с названиями категориями
3. Выводим меню:
echo $menu;
На JS запрос к БД делаем через aJax и просто меняем стиль у определенного элемента.
Если у Вас не WP, то структуру категорий нужно прописать самостоятельно, например, в “массив массивов”
Опубликовано на Март 25th, 2015
Здравствуйте! У меня шаблон WordPress сайт типа Landing Page, т.е ссылки меню в виде #page. У меня только главная страница выделяется как активная. Подскажите как сделать
Опубликовано на Апрель 22nd, 2015
Степан => автор блога говорит:
Здравствуйте! Дайте ссылку на сайт, посмотрю на ваши стили CSS
Опубликовано на Апрель 22nd, 2015
Здравствуйте! Могу скинуть нужные файлы. Сайт пока на локальном
Опубликовано на Апрель 23rd, 2015
Опубликовано на Апрель 23rd, 2015
Степан => автор блога говорит:
Когда сайт будет в сети, дадите адрес, сразу на месте и подскажу и все доделаем.
Опубликовано на Апрель 26th, 2015
Здравствуйте! У меня активная ссылка выделяется белым с рамкой, а подчеркнутой и другого цвета как можно сделать?
Опубликовано на Июнь 9th, 2015
При прокрутке местоположение тоже не показывает((((
Опубликовано на Июнь 9th, 2015
Степан => автор блога говорит:
Здравствуйте! Зайдите в стили CSS и найдите эту активную ссылку. Уберите там “border” и “background”.
Чтобы лучше меня понять, почитайте вот это
Опубликовано на Июнь 10th, 2015
Товарищи! Если кто-то такой же “ас”, как я, при работе на Вордпресс нужно установить плагин jquery-vertical-mega-menu. (Для бокового меню). Выбираете оформление без стиля, создаёте свой класс в css и приписываете его пунктам меню в разделе “Меню”.
А для главного (горизонтального меню) ищите в стилях слово current. Если оно там есть, значит, можно настроить вид текущей ссылки. Извините за сумбур.
Опубликовано на Сентябрь 15th, 2015
Добрый день. У меня вопрос, как можна сделать, чтобы активным было не только основное меню, но и меню в футоре. класы у 2-х меню отличаются
Опубликовано на Сентябрь 19th, 2015
Степан => автор блога говорит:
Здравствуйте, Вова! Используете WordPress?
Опубликовано на Сентябрь 19th, 2015
Спасибо огромное! Спасли меня от битья головой об стену ❓ Облазила кучу сайтов на которых непонятно описывается как написать скрипт и всякие функции php, а тут оказывается WP сам все это за меня уже сделал)) сама бы не догадалась в фаербаг посмотреть! Написала всего 1 строку в css и вуаля) Очень вам благодарна! 🙂
Опубликовано на Февраль 3rd, 2016
Степан => автор блога говорит:
Пожалуйста, Алена! Был рад помочь! :rose:
Опубликовано на Февраль 3rd, 2016
Степан, добрый день!
Прошу прощения,что не совсем по теме, просто увидел в посте схожую тематику и решил обратиться к вам за помощью. Подскажите пожалуйста, а возможно ли сделать так, чтобы при переходе на любую из записей (не страниц) в вордпресс всегда оставался подсвеченным один пункт меню?
При переходах в пределах Level-1 и Level-2 выделение работает, а при переходе дальше нет.
Из меню Level-2 ссылки ведут на записи, когда открывается пост с записью выделение пропадает. Все записи из одной категории Level-1, возможно ли оставить эту категорию подсвеченной.
Буду очень благодарен за подсказку или направление в котором копать. Я очень туг со скриптами…
Спасибо!
С уважением, Алексей.
Опубликовано на Июль 19th, 2016
Степан => автор блога говорит:
Здравствуйте, Алексей! Почитайте вот тут.
Прочитайте всю статью + комментарии.
Вы найдете там ответ!
Опубликовано на Июль 21st, 2016
Огромное спасибо. На WordPress сработал только Ваш способ (использовал второй). Часов пять безрезультатно лопатил интернет, пока к Вам добрался ))
Опубликовано на Ноябрь 28th, 2017
Степан => автор блога говорит:
Пожалуйста, Александр!
Можете использовать класс “li.current_page_item a” для WordPress. Вот CSS стиль:
Опубликовано на Ноябрь 30th, 2017
Подскажите пожалуйста как сделать что бы активная ссылка не пропадала в полной новости. Вот пример localhost/v-mire/ (категория /v-mire/) все работает хорошо и новый клас добавился к тегу
.
А вот все плохо localhost/v-mire/2-post2.html в полной новости тег не добавляется как исправить? Подскажите пожалуйста.
Опубликовано на Январь 27th, 2019
Здравствуйте! Проблема такая: сайт на WordPress, в шаблоне к активной ссылке добавляется элемент со своими стилями. Просто цветной кружок. Как можно добавить такой элемент к активной ссылке?
Опубликовано на Февраль 1st, 2019
Степан => автор блога говорит:
Опубликовано на Февраль 5th, 2019
Здравствуйте. Как сделать, что бы ссылки выделялись только в меню, а на остальной странице слили не менялись?
пятница, 28 ноября 2008 г.
Подсветка меню с помощью CSS
Большинство веб-сайтов подсвечивает пункт меню навигации в зависимости от раздела, где в данный момент находится пользователь. Это помогает посетителю лучше сориентироваться на сайте (помним о юзабилити!). Как правило, для этого нужно подстраивать код HTML каждой страницы, чтобы выделить соответствующий элемент меню.
Перво-наперво вы должны присвоить class каждому элементу навигации.
Затем вы должны назначить id каждому тегу . Идентификатор id будет отражать где в данный момент находится пользователь и изменяться при переходе из одного раздела сайта в другой.
Для главной страницы он будет выглядеть , на странице «О нас» так: , а в разделе «Контакты» вот так: .
После этого вы создаете правило CSS :
Это создаёт правило, которое срабатывает только тогда, когда class=”home” находится внутри id=”home” , class=”about” внутри id=”about” и class=”contact” внутри id=”contact” .
Upd: Специально для Анонима даю код:
7 Комментариев :
ёпт. о чем тема? где стили подсветки?
Смотри апдейт. Если уж вдруг и там непонятно, могу справку по классам/ ид в CSS дать.
Подписался на е-mail.
Облако тэгов просто бомба, но у меня диалап и грузится невразумительно долго!
Я по теме в русиан-блогере по поводу меню бара!
Сделал меню по рекомендации в твоём посте ” Статические страницы . ” у себя в тестовой странице
https://profitinweb.blogspot.com/
Читал этот пост и “CSS горизонтальные списки” Ты уж извини, я чайник, но не совсем.
-Что-то мне понятно,но не всё, вот хотя бы как продолжить урок из “Статических страниц. “, что бы плавно перейти к теме затронутой в этом посте и реализовать такое вот меню как в этом примере?
Добро пожаловать, Numerologger!
Облако тегов – забавная штука, но я не особо приветствую флеш в дизайне. Скорей всего оно исчезнет с ближайшим редизайном.
Пример с подсветкой меню предназначен в первую очередь для «самостоятельных» сайтов. В-частности в нашем проекте мы используем этот прием для пользовательских шаблонов.
Если ответ в теме Blogger Help Group не поможет, попытаюсь проработать пример для платформы Блоггер более подробно. Спасибо за вопрос, кстати.
Источники:
https://cccp-blog.com/koding/vyidelenie-aktivnogo-punkta-menyu-s-pomoshhyu-jquery
https://bloggood.ru/effekty-dlya-sajta-2/kak-na-sajte-vydelit-aktivnuyu-ssylku-v-menyu-ispolzuya-javascript-i-css.html/
https://dotrb.blogspot.com/2008/11/css-navigation-menu.html
