Как на сайте выделить активную ссылку в меню, используя JavaScript и CSS

Опубликовано: 01.09.2018

Совсем недавно, когда создавал сайт под заказ, я столкнулся с маленькой проблемой, которая забрала у меня кучу времени и нервов, чтобы ее решить. Проблема заключалась в том, что заказчик захотел сделать на сайте эффект, чтобы активная ссылка, которая ссылается на текущую страницу в меню, выделялась. Я перелопатил кучу сайтов и форумов, чтобы найти ответ на свой вопрос, и, все-таки, нашел ответ,  а что-то пришлось самому додумать. Итак, этот вопрос решается очень быстро и просто и вам не придется искать дополнительную информацию, так как даю полностью готовый скрипт.

Итак присупим.

Как на сайте выделить активную ссылку в меню на 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 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> <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';

[ посмотреть работу кода ]

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css , javascript , wordpress , эффекты для сайта

rss