BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2013-06-13 / Вр:21:33 / просмотров: 20630

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

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

Как на сайте выделить активную ссылку в меню на WordPress.

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

Заметил я, что WordPress автоматически добавляет класс для активной нажатой ссылки.  Это можно посмотреть, если открыть исходный код сайта.

Как на сайте выделить активную ссылку в меню на WordPress.

В исходном коде можно увидеть, что к активной ссылке был добавлен класс «current-menu-item». А это значит, что мы можем прописать к этому классу любой стиль.

Пример:
Откройте CSS файл шаблона и впишите вот такой код:

#menu li .current-menu-item a
{
color:#сс0000;
}

Внимание: Этот код будет работать в том случае, если ваше меню было взято в блок так, как у меня:

<div id="menu">ваше меню (я вывел меню через виджет)</div>

Как на сайте выделить активную ссылку в меню на WordPress.

Вот такой получился у меня результат, когда я использовал класс «current-menu-item».

Как на сайте выделить активную ссылку в меню на WordPress.

Теперь я поделюсь информацией, как выделить активную ссылку абсолютно для любого сайта, используя всего лишь маленький код JavaScript и CSS.

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

Хочу предложить готовый код на  JavaScript, который автоматически будет прописывать класс « act» к активной ссылке меню, которая ссылается на текущую страницу. Этот код легко встраивается в любой дизайн, шаблон и в любую систему управления сайтом CMS (Joomla, WordPress и др.).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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';

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

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

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

Получай обновления блога!!! Подпишись:

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

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

  1. Андрей

    Спасибо, все работает. Давно искал подобный скрипт. Вот только теперь возникает еще одна проблема, как теперь сделать так чтобы не все ссылки брали данное правило, а только некоторые?
    Использовал второй пример.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Андрей. По поводу вопроса, вам следует указать указать другой стиль, например так

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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;}
    #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>

    Ответить

  2. Роман

    Спасибо тебе, все отлично работает!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста!

    Ответить

  3. Женя

    Отличный скрипт, подскажите как сделать
    например menu.php работает
    а если будет menu.php?menu=1 то нет. Как сделать что бы читалось только до ?, спс

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Женя, я не понял Ваш вопрос?

    Ответить

    sam отвечает:

    try{
    var el=document.getElementById('topmenu').getElementsByTagName('a');
    var url=document.location.href;
    for(var i=0;i&lt;el.length; i++){
    	//if (url==el[i].href){
    	//	el[i].className += &#039;active&#039;;
    	//};
    	if( url.indexOf(el[i]) + 1 ){
    		el[i].className += &#039;active&#039;;
    	}
    };
    }catch(e){}
    

    Ответить

  4. goel

    Спасибо, просто и работает! То что нужно.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста!

    Ответить

  5. Ян

    Степан, огромное спасибо за очень полезную статью! Метод работает, но почему-то только для ссылок вида a href=”/gbook/”, а к ссылкам вида a href=”/price.html” свойство стиля не применяется. Подскажи пожалуйста, что нужно подправить в скрипте? :|

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Какой способ Вы выбрали?

    Ответить

    Ян отвечает:

    Выбрал второй способ. Мне удалось решить проблему, просто нужно было задать стиль не для a.act{color:#F00;}, а для li a.act{color:#F00;}.

    Ответить

  6. onjee

    Большое спасибо. Очень выручил :)

    Пытался решить проблему разными способами и только твой скрипт сработал на WordPress.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста!

    Ответить

  7. Роман

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Рома!
    Напишите ваш код меню (можете его укоротить до макс.).

    Ответить

    Роман отвечает:

    	<table>
    	<tr>
    	<td class="menu"><a href="index.php">Главная</a></td>
    	<td class="menu"><a href="history.php">Об<br>организации</td>
    	<td class="menu"><a href="licens.php">Лицензии</td>
    	<td class="menu"><a href="document.php">Справочные<br>материалы</td>
    	<td class="menu"><a href="contacty.php">Контакты</a></td>
    	<td class="menu"><a href="svyaz.php">Обратная<br>связь</a></td>
    	</table>
    	</nav>
    	<section>
    //основное меню
      <div class = "ssyl">
       <h3> <ul class="ssylk">
      <li><a href="history.php"> История</a></li>
       <li><a href="stacionar.php"> О стационаре</a></li>
       <li><a href="raspisanie.php">Расписание</a></li>
       <li><a href="rukovodstvo.php">Руководство</a></li>
       <li><a href="vrachi.php">Врачи</a></li>
       </ul> </h3>
       </div>
       <div class = "osn">
    // доп меню для страницы "Об<br>организации"
     

    Ответить

    DRval отвечает:

    Для реализации этого, Вам нужно учесть структуру вложенности меню. В 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, то структуру категорий нужно прописать самостоятельно, например, в “массив массивов”

    Array (
    [cat0] => Array (subcat0, subcat1, ..., subcatN),
    [cat1] => Array (subcat0, subcat1, ..., subcatM),
    ...
    [catN] => Array (subcat0, subcat1, ..., subcatK))
    

    и потом вместо запроса к БД проверять наличие текущей подкатегории в каждом из “подмассивов”.
    А далее, как и описано ранее.

    Ответить

  8. Eko

    Здравствуйте! У меня шаблон WordPress сайт типа Landing Page, т.е ссылки меню в виде #page. У меня только главная страница выделяется как активная. Подскажите как сделать

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Дайте ссылку на сайт, посмотрю на ваши стили CSS

    Ответить

    Eko отвечает:

    Здравствуйте! Могу скинуть нужные файлы. Сайт пока на локальном

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Когда сайт будет в сети, дадите адрес, сразу на месте и подскажу и все доделаем.

    Ответить

    Eko отвечает:

    Здравствуйте! У меня активная ссылка выделяется белым с рамкой, а подчеркнутой и другого цвета как можно сделать?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Зайдите в стили CSS и найдите эту активную ссылку. Уберите там “border” и “background”.
    Чтобы лучше меня понять, почитайте вот это

    Ответить

  9. Eko

    При прокрутке местоположение тоже не показывает((((

    Ответить

  10. Gala

    Товарищи! Если кто-то такой же “ас”, как я, при работе на Вордпресс нужно установить плагин jquery-vertical-mega-menu. (Для бокового меню). Выбираете оформление без стиля, создаёте свой класс в css и приписываете его пунктам меню в разделе “Меню”.

    А для главного (горизонтального меню) ищите в стилях слово current. Если оно там есть, значит, можно настроить вид текущей ссылки. Извините за сумбур.

    Ответить

  11. Вова

    Добрый день. У меня вопрос, как можна сделать, чтобы активным было не только основное меню, но и меню в футоре. класы у 2-х меню отличаются

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Вова! Используете WordPress?

    Ответить

  12. Алена

    Спасибо огромное! Спасли меня от битья головой об стену :?: Облазила кучу сайтов на которых непонятно описывается как написать скрипт и всякие функции php, а тут оказывается WP сам все это за меня уже сделал)) сама бы не догадалась в фаербаг посмотреть! Написала всего 1 строку в css и вуаля) Очень вам благодарна! :smile:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Алена! Был рад помочь! :rose:

    Ответить

  13. Алексей

    Степан, добрый день!

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

    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 type="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, возможно ли оставить эту категорию подсвеченной.
    Буду очень благодарен за подсказку или направление в котором копать. Я очень туг со скриптами…

    Спасибо!
    С уважением, Алексей.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Алексей! Почитайте вот тут.
    Прочитайте всю статью + комментарии.
    Вы найдете там ответ!

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663