Совсем недавно, когда создавал сайт под заказ, я столкнулся с маленькой проблемой, которая забрала у меня кучу времени и нервов, чтобы ее решить. Проблема заключалась в том, что заказчик захотел сделать на сайте эффект, чтобы активная ссылка, которая ссылается на текущую страницу в меню, выделялась. Я перелопатил кучу сайтов и форумов, чтобы найти ответ на свой вопрос, и, все-таки, нашел ответ, а что-то пришлось самому додумать. Итак, этот вопрос решается очень быстро и просто и вам не придется искать дополнительную информацию, так как даю полностью готовый скрипт.
Итак присупим.
Как на сайте выделить активную ссылку в меню на WordPress.
Совсем недавно я рассказывал о том, как задать стиль в пункте меню для текущей страницы созданной на WordPress. Хочу повториться, чтобы все, что касается этой темы, находилось в одной статье.
Заметил я, что WordPress автоматически добавляет класс для активной нажатой ссылки. Это можно посмотреть, если открыть исходный код сайта.
В исходном коде можно увидеть, что к активной ссылке был добавлен класс «current-menu-item». А это значит, что мы можем прописать к этому классу любой стиль.
Пример:
Откройте CSS файл шаблона и впишите вот такой код:
#menu li .current-menu-item a
{
color:#сс0000;
}
Внимание: Этот код будет работать в том случае, если ваше меню было взято в блок так, как у меня:
<div id="menu">ваше меню (я вывел меню через виджет)</div>
Вот такой получился у меня результат, когда я использовал класс «current-menu-item».
Теперь я поделюсь информацией, как выделить активную ссылку абсолютно для любого сайта, используя всего лишь маленький код JavaScript и CSS.
Как на сайте выделить активную ссылку в меню, используя JavaScript и CSS.
Хочу предложить готовый код на JavaScript, который автоматически будет прописывать класс « act» к активной ссылке меню, которая ссылается на текущую страницу. Этот код легко встраивается в любой дизайн, шаблон и в любую систему управления сайтом CMS (Joomla, WordPress и др.).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<style ENGINE="text/css">
body{font: 14px/normal Verdana,sans-serif;}
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}
</style>
<div id="msgText">
<a href="1.html">Ссылка1</a>
<a href="2.html">Ссылка2</a>
</div>
<script type="text/javascript">
try{
var el=document.getElementById('msgText').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el[i].href){
el[i].className += ' act';
};
};
}catch(e){}
</script>
</body>
</html>
Обратите внимание на пункт 5 - 10 в коде.
<style type="text/css">
body{font: 14px/normal Verdana,sans-serif;}
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}
</style>
Здесь вы меняете вид меню, используя знания CSS.
Есть другой способ решение этой проблемы и тоже с использованием JavaScript. Какой способ вам больше нравится, такой и выбирайте.
<html>
<head>
<script>
onload = function ()
{
for (var lnk = document.links, j = 0; j < lnk.length; j++)
if (lnk [j].href == document.URL) lnk [j].style.cssText = 'color:black;text-decoration:none; border:1px solid #000';
}
</script>
</head>
<body>
<ul class="menu">
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
</ul>
</body>
</htmL>
Обратите внимание на пункт 8 в коде.
..... style.cssText = ' здесь пропишите правила для активной ссылки, используя знания CSS';
Вот и все. Проблема решена. Если у вас что-то не получилось или вы не поняли, пишите в комментариях, отвечу быстро. Ну, все, до скорых встреч.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Что это такое: «Сайт ненадолго закрыт на техническое обслуживание. Зайдите через минуту»?
Расширенный поиск для WordPress
htaccess для WordPress
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220444 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181504
41 Ответов на комментарий - Как на сайте выделить активную ссылку в меню, используя JavaScript и CSS
Добавить комментарий
Метки: css, javascript, wordpress, эффекты для сайта
Спасибо, все работает. Давно искал подобный скрипт. Вот только теперь возникает еще одна проблема, как теперь сделать так чтобы не все ссылки брали данное правило, а только некоторые?
Использовал второй пример.
Пожалуйста, Андрей. По поводу вопроса, вам следует указать указать другой стиль, например так
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <body> <style ENGINE="text/css"> body{font: 14px/normal Verdana,sans-serif;} a{text-decoration:none;color:#999;} a:hover{color:#666;} a.act{color:#F00;} #stil a{text-decoration:none;color:#000;} #stil a:hover{color:#cc0000;} #stil a.act{color:#F00;} </style> <div id="msgText"> <a href="1.html" rel="nofollow">Ссылка1</a> <a href="2.html" rel="nofollow">Ссылка2</a> </div> <div id="stil"> <a href="3.html" rel="nofollow">Ссылка3</a> <a href="4.html" rel="nofollow">Ссылка4</a> </div> <script type="text/javascript"> try{ var el=document.getElementById('msgText').getElementsByTagName('a'); var url=document.location.href; for(var i=0;i<el.length; i++){ if (url==el[i].href){ el[i].className += ' act'; }; }; }catch(e){} </script> </body> </html>Спасибо тебе, все отлично работает!
Пожалуйста!
Отличный скрипт, подскажите как сделать
например menu.php работает
а если будет menu.php?menu=1 то нет. Как сделать что бы читалось только до ?, спс
Женя, я не понял Ваш вопрос?
Спасибо, просто и работает! То что нужно.
Пожалуйста!
Степан, огромное спасибо за очень полезную статью! Метод работает, но почему-то только для ссылок вида a href=”/gbook/”, а к ссылкам вида a href=”/price.html” свойство стиля не применяется. Подскажи пожалуйста, что нужно подправить в скрипте?
Какой способ Вы выбрали?
Выбрал второй способ. Мне удалось решить проблему, просто нужно было задать стиль не для a.act{color:#F00;}, а для li a.act{color:#F00;}.
Большое спасибо. Очень выручил
Пытался решить проблему разными способами и только твой скрипт сработал на WordPress.
Пожалуйста!
Спасибо за скрипт. Сработал, но можно ли его улучшить? У меня просто на сайте есть основное меню навигации и на некоторых страницах подменю Как сделать так, чтобы при переходе по пунктам подменю., пункт меню тоже оставался выделенным? (Для реализации выбрал второй вариант)
Пожалуйста, Рома!
Напишите ваш код меню (можете его укоротить до макс.).
Для реализации этого, Вам нужно учесть структуру вложенности меню. В WordPress в таблице term_taxonomy указываются родительские категории для каждой подкатегории.
Т.е. нужно при каждом заходе на страницу подкатегории проверять какой категории она принадлежит и формировать меню в соответствии с этими данными.
Приблизительно это должно выглядеть так (на php):
1. Делаем запрос к БД. Находим категорию, которой принадлежит подкатегория.
Записываем ее в переменную $res.
2. Находим в списке категорий ту, что записана в $res и формируем меню.
$menu = ''; for ($i=0;$i<count($cat);$++){ if ($res==$cat[$i]) $style=' style="background:red;"'; else $style=''; $menu .= '<punkt'.$style.'>$cat[$i]</punkt>'; }Т.е. при совпадении категорий меняем стиль тега.
где punkt – это любые Ваши теги. В данном случае у Вас ,
$cat – массив с названиями категориями
3. Выводим меню:
echo $menu;
На JS запрос к БД делаем через aJax и просто меняем стиль у определенного элемента.
Если у Вас не WP, то структуру категорий нужно прописать самостоятельно, например, в “массив массивов”
и потом вместо запроса к БД проверять наличие текущей подкатегории в каждом из “подмассивов”.
А далее, как и описано ранее.
Здравствуйте! У меня шаблон WordPress сайт типа Landing Page, т.е ссылки меню в виде #page. У меня только главная страница выделяется как активная. Подскажите как сделать
Здравствуйте! Дайте ссылку на сайт, посмотрю на ваши стили CSS
Здравствуйте! Могу скинуть нужные файлы. Сайт пока на локальном
try{ var el=document.getElementById('topmenu').getElementsByTagName('a'); var url=document.location.href; for(var i=0;i<el.length; i++){ //if (url==el[i].href){ // el[i].className += 'active'; //}; if( url.indexOf(el[i]) + 1 ){ el[i].className += 'active'; } }; }catch(e){}Когда сайт будет в сети, дадите адрес, сразу на месте и подскажу и все доделаем.
Здравствуйте! У меня активная ссылка выделяется белым с рамкой, а подчеркнутой и другого цвета как можно сделать?
При прокрутке местоположение тоже не показывает((((
Здравствуйте! Зайдите в стили CSS и найдите эту активную ссылку. Уберите там “border” и “background”.
Чтобы лучше меня понять, почитайте вот это
Товарищи! Если кто-то такой же “ас”, как я, при работе на Вордпресс нужно установить плагин jquery-vertical-mega-menu. (Для бокового меню). Выбираете оформление без стиля, создаёте свой класс в css и приписываете его пунктам меню в разделе “Меню”.
А для главного (горизонтального меню) ищите в стилях слово current. Если оно там есть, значит, можно настроить вид текущей ссылки. Извините за сумбур.
Добрый день. У меня вопрос, как можна сделать, чтобы активным было не только основное меню, но и меню в футоре. класы у 2-х меню отличаются
Здравствуйте, Вова! Используете WordPress?
Спасибо огромное! Спасли меня от битья головой об стену
Облазила кучу сайтов на которых непонятно описывается как написать скрипт и всякие функции php, а тут оказывается WP сам все это за меня уже сделал)) сама бы не догадалась в фаербаг посмотреть! Написала всего 1 строку в css и вуаля) Очень вам благодарна! 
Пожалуйста, Алена! Был рад помочь!
Степан, добрый день!
Прошу прощения,что не совсем по теме, просто увидел в посте схожую тематику и решил обратиться к вам за помощью. Подскажите пожалуйста, а возможно ли сделать так, чтобы при переходе на любую из записей (не страниц) в вордпресс всегда оставался подсвеченным один пункт меню?
HTML
<div id='menu'> <ul> <li class='level-1'></li> <li class='level-1'></li> <ul> <li class='level-2'></li> <li class='level-2'></li> </ul> </ul> </div>скрипт
<script ENGINE="text/javascript"> $(document).ready(function() { if (window.location.pathname!="/") $('a[href *= '+window.location.pathname+']').parents('.menu_fall').addClass('activ_menu'); else $('a[href = /]').parents('.menu_fall').addClass('activ_menu'); }); </script>При переходах в пределах Level-1 и Level-2 выделение работает, а при переходе дальше нет.
Из меню Level-2 ссылки ведут на записи, когда открывается пост с записью выделение пропадает. Все записи из одной категории Level-1, возможно ли оставить эту категорию подсвеченной.
Буду очень благодарен за подсказку или направление в котором копать. Я очень туг со скриптами…
Спасибо!
С уважением, Алексей.
Здравствуйте, Алексей! Почитайте вот тут.
Прочитайте всю статью + комментарии.
Вы найдете там ответ!
Огромное спасибо!!! На WordPress сработал только Ваш способ (использовал второй). Часов пять безрезультатно лопатил интернет, пока к Вам добрался ))
Пожалуйста, Александр!
Можете использовать класс “li.current_page_item a” для WordPress. Вот CSS стиль:
li.current_page_item a{ text-decoration:underline; color:#cc0000; }Подскажите пожалуйста как сделать что бы активная ссылка не пропадала в полной новости. Вот пример localhost/v-mire/ (категория /v-mire/) все работает хорошо и новый клас добавился к тегу
.
А вот все плохо localhost/v-mire/2-post2.html в полной новости тег не добавляется как исправить? Подскажите пожалуйста.
Здравствуйте! Проблема такая: сайт на WordPress, в шаблоне к активной ссылке добавляется элемент со своими стилями. Просто цветной кружок. Как можно добавить такой элемент к активной ссылке?
Здравствуйте!
/* Класс текущего элемента списка: */ li.current_page_item { } /* Класс текущей гиперссылки элемента списка: */ li.current_page_item a{ }Здравствуйте. Как сделать, что бы ссылки выделялись только в меню, а на остальной странице слили не менялись?
<div class="container-menu-h"> <div class="menu-h-wrapper"> <ul class="menu-h" style="visibility: visible; justify-content: space-around;"> <li class="menu-new" style=""> <a href="/shop/novinki/">Новинки</a> </li> <li class="menu-discount"> <a href="/shop/rasprodazha/" style="text-decoration: underline;">Распродажа</a> </li> <li class="tree menu-women"> <a href="/shop/">Женщинам</a> <ul class="menu-inner"> <li> <div class="d-flex"> <div class="col-md-3 menu-platya"> <a href="/shop/platya/"> Платья </a> </div> <div class="col-md-3 menu-sarafany"> <a href="/shop/sarafany/"> Сарафаны </a> </div> <div class="col-md-3 menu-kostyumy"> <a href="/shop/kostyumy/"> Костюмы </a> </div> <div class="col-md-3 menu-tuniki"> <a href="/shop/tuniki/"> Туники </a> </div> <div class="col-md-3 menu-sumki"> <a href="/shop/sumki/"> Сумки </a> </div> <div class="col-md-3 menu-bryuki"> <a href="/shop/bryuki/"> Брюки </a> </div> <div class="col-md-3 menu-futbolki"> <a href="/shop/futbolki/"> Футболки </a> </div> <div class="col-md-3 menu-shorty"> <a href="/shop/shorty/"> Шорты </a> </div> <div class="col-md-3 menu-kombinezony"> <a href="/shop/k/"> Комбинезоны </a> </div> <div class="col-md-3 menu-kardigany"> <a href="/shop/kardigany/"> Кардиганы </a> </div> <div class="col-md-3 menu-bathrobe"> <a href="/shop/domodejda/"> Домашняя </a> </div> <div class="col-md-3 menu-yubki"> <a href="/shop/yubki/"> Юбки </a> </div> <div class="col-md-3 menu-tolstovki"> <a href="/shop/kardigany/tolstovki/"> Толстовки </a> </div> <div class="col-md-3 menu-svitshoty"> <a href="/shop/tuniki/svitshoty/"> Свитшоты </a> </div> <div class="col-md-3 menu-plyazh"> <a href="/shop/plyazhnaya-odezhda/"> Пляжная </a> </div> <div class="col-md-3 menu-belye"> <a href="/shop/nizhnee-bele/"> Нижнее&nbsp;бельё </a> </div> </div> </li> <li> <div class="d-flex menu-h-big"> <div class="col-md-4"> <a href="/shop/bolshie-razmery/"> <img src="/wa-data/public/shop/themes/topshopRoznica/img/fat.jpg"> Большие размеры </a> </div> <div class="col-md-4"> <a href="/shop/naryady-dlya-beremennykh/"> <img src="/wa-data/public/shop/themes/topshopRoznica/img/milf.jpg"> Для беременных </a> </div> <div class="col-md-4"> <a href="/shop/elegantnyy-ekovelyur/"> <img src="/wa-data/public/shop/themes/topshopRoznica/img/eco.jpg"> Из эковелюра </a> </div> </div> </li> </ul> </li> <li class="tree menu-men"> <a href="/shop/muzhskaya-odezhda/">Мужчинам</a> <ul class="menu-inner"> <li> <div class="d-flex"> <div class="col-md-12 menu-kost"> <a href="/shop/muzhskaya-odezhda/kostyumy/">Костюмы</a> </div> <div class="col-md-12 menu-maiki"> <a href="/shop/muzhskaya-odezhda/mayki/">Майки</a> </div> <div class="col-md-12 menu-futbolki"> <a href="/shop/muzhskaya-odezhda/futbolki/">Футболки</a> </div> <div class="col-md-12 menu-shorty"> <a href="/shop/muzhskaya-odezhda/shorty/">Шорты</a> </div> <div class="col-md-12 menu-domodejda"> <a href="/shop/muzhskaya-odezhda/bryuki/">Брюки</a> </div> <div class="col-md-12 menu-bathrobe"> <a href="/shop/muzhskaya-odezhda/khalaty/">Халаты</a> </div> </div> </li> </ul> </li> <li class="tree menu-child"> <a href="/shop/detskaya-odezhda/">Детям</a> <ul class="menu-inner"> <li> <div class="d-flex"> <div class="col-md-3 menu-school"> <a href="/shop/detskaya-odezhda/shkolnaya-forma/">Школьная форма</a> </div> <div class="col-md-3 menu-futbolki"> <a href="/shop/detskaya-odezhda/futbolki/">Футболки</a> </div> <div class="col-md-3 menu-maiki"> <a href="/shop/detskaya-odezhda/mayki-i-topy/">Майки и топы</a> </div> <div class="col-md-3 menu-shorty"> <a href="/shop/detskaya-odezhda/shorty/">Шорты</a> </div> <div class="col-md-3 menu-yubki"> <a href="/shop/detskaya-odezhda/yubki/">Юбки</a> </div> <div class="col-md-3 menu-platya"> <a href="/shop/detskaya-odezhda/platya/">Платья</a> </div> <div class="col-md-3 menu-svitshoty"> <a href="/shop/detskaya-odezhda/vodolazki/">Водолазки</a> </div> <div class="col-md-3 menu-tuniki"> <a href="/shop/detskaya-odezhda/tuniki/">Туники</a> </div> <div class="col-md-3 menu-tolstovki"> <a href="/shop/detskaya-odezhda/tolstovki/">Толстовки</a> </div> <div class="col-md-3 menu-svitshoty"> <a href="/shop/detskaya-odezhda/svitshoty/">Свитшоты</a> </div> <div class="col-md-3 menu-bryuki"> <a href="/shop/detskaya-odezhda/bryuki/">Брюки</a> </div> <div class="col-md-3 menu-kostyumy"> <a href="/shop/detskaya-odezhda/kostyumy/">Костюмы</a> </div> <div class="col-md-3 menu-kostyumy"> <a href="/shop/detskaya-odezhda/pizhami/">Пижамы</a> </div> <div class="col-md-3 menu-bathrobe"> <a href="/shop/detskaya-odezhda/khalaty/">Халаты</a> </div> </div> </li> </ul> </li> <li class="tree menu-house"> <a href="#">Для дома</a> <ul class="menu-inner"> <li> <div class="d-flex"> <div class="col-md-12 menu-suv"> <a href="/shop/suveniry/">Сувениры</a> </div> <div class="col-md-12 menu-bel"> <a href="/shop/postelnoe-bel/">Постельное бельё</a> </div> <div class="col-md-12 menu-pol"> <a href="/shop/polotentsa/">Полотенца</a> </div> <div class="col-md-12 menu-ob"> <a href="/shop/obuv/">Домашняя обувь</a> </div> </div> </li> </ul> </li> </ul> </div> </div>Огромное спасибо! Второй спобос сразу сработал. Первый не пробовал, но только потому, что не понял.
Добрый день. ЯЯпробую применить код из вашего примера, но не работает. Что я делаю не так?
$(function () { try{ var el=document.getElementsByClassName('header-menu ul li').getElementsByTagName('a'); var url=document.location.href; for(var i=0;i<el.length; i++){ if (url==el[i].href){ el[i].className += 'active'; }; }; }catch(e){} });.header-menu ul li a { text-decoration: none; display: block; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; font-weight: bold; color: #F5F5F5; cursor: pointer; position: relative; } .header-menu ul li a.active { color: #c58a52; }Пожалуйста!