Как на сайте выделить активную ссылку в меню, используя 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 , эффекты для сайта