BloGGood.ru

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

WordPress, PHP, HTML, CSS, Windows

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Андрей

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

  2. Avatar photo Степан => автор блога

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

    <!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 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>
  3. Роман

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

  4. Avatar photo Степан => автор блога

    Пожалуйста!

  5. Женя

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

  6. Avatar photo Степан => автор блога

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

  7. goel

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

  8. Avatar photo Степан => автор блога

    Пожалуйста!

  9. Ян

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

  10. Avatar photo Степан => автор блога

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

  11. Ян

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

  12. onjee

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

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

  13. Avatar photo Степан => автор блога

    Пожалуйста!

  14. Роман

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

  15. Avatar photo Степан => автор блога

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

  16. Роман
    	<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>организации"
     
  17. 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))
    

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

  18. Eko

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

  19. Avatar photo Степан => автор блога

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

  20. Eko

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

  21. 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){}
    
  22. Avatar photo Степан => автор блога

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

  23. Eko

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

  24. Eko

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

  25. Avatar photo Степан => автор блога

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

  26. Gala

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

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

  27. Вова

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

  28. Avatar photo Степан => автор блога

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

  29. Алена

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

  30. Avatar photo Степан => автор блога

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

  31. Алексей

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

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

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

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

  32. Avatar photo Степан => автор блога

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

  33. Александр

    Огромное спасибо!!! На WordPress сработал только Ваш способ (использовал второй). Часов пять безрезультатно лопатил интернет, пока к Вам добрался ))

  34. Avatar photo Степан => автор блога

    Пожалуйста, Александр!
    Можете использовать класс “li.current_page_item a” для WordPress. Вот CSS стиль:

    li.current_page_item a{
        text-decoration:underline;
        color:#cc0000;
    }
    
  35. Александр

    Подскажите пожалуйста как сделать что бы активная ссылка не пропадала в полной новости. Вот пример localhost/v-mire/ (категория /v-mire/) все работает хорошо и новый клас добавился к тегу

    <a>

    .
    А вот все плохо localhost/v-mire/2-post2.html в полной новости тег не добавляется как исправить? Подскажите пожалуйста.

  36. Ermolay

    Здравствуйте! Проблема такая: сайт на WordPress, в шаблоне к активной ссылке добавляется элемент со своими стилями. Просто цветной кружок. Как можно добавить такой элемент к активной ссылке?

  37. Avatar photo Степан => автор блога

    Здравствуйте!

    /* Класс текущего элемента списка: */
    li.current_page_item {
    }
    /* Класс текущей гиперссылки элемента списка: */
    li.current_page_item a{
    }
    
  38. Андрей

    Здравствуйте. Как сделать, что бы ссылки выделялись только в меню, а на остальной странице слили не менялись?

    &lt;div class=&quot;container-menu-h&quot;&gt;
            &lt;div class=&quot;menu-h-wrapper&quot;&gt;
                &lt;ul class=&quot;menu-h&quot; style=&quot;visibility: visible; justify-content: space-around;&quot;&gt;
                    &lt;li class=&quot;menu-new&quot; style=&quot;&quot;&gt;
                        &lt;a href=&quot;/shop/novinki/&quot;&gt;Новинки&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;menu-discount&quot;&gt;
                        &lt;a href=&quot;/shop/rasprodazha/&quot; style=&quot;text-decoration: underline;&quot;&gt;Распродажа&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;tree menu-women&quot;&gt;
                        &lt;a href=&quot;/shop/&quot;&gt;Женщинам&lt;/a&gt;
                        &lt;ul class=&quot;menu-inner&quot;&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;d-flex&quot;&gt;
                                    &lt;div class=&quot;col-md-3 menu-platya&quot;&gt;
                                        &lt;a href=&quot;/shop/platya/&quot;&gt;
                                            Платья
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-sarafany&quot;&gt;
                                        &lt;a href=&quot;/shop/sarafany/&quot;&gt;
                                            Сарафаны
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-kostyumy&quot;&gt;
                                        &lt;a href=&quot;/shop/kostyumy/&quot;&gt;
                                            Костюмы
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-tuniki&quot;&gt;
                                        &lt;a href=&quot;/shop/tuniki/&quot;&gt;
                                            Туники
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-sumki&quot;&gt;
                                        &lt;a href=&quot;/shop/sumki/&quot;&gt;
                                            Сумки
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-bryuki&quot;&gt;
                                        &lt;a href=&quot;/shop/bryuki/&quot;&gt;
                                            Брюки
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-futbolki&quot;&gt;
                                        &lt;a href=&quot;/shop/futbolki/&quot;&gt;
                                            Футболки
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-shorty&quot;&gt;
                                        &lt;a href=&quot;/shop/shorty/&quot;&gt;
                                            Шорты
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-kombinezony&quot;&gt;
                                        &lt;a href=&quot;/shop/k/&quot;&gt;
                                            Комбинезоны
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-kardigany&quot;&gt;
                                        &lt;a href=&quot;/shop/kardigany/&quot;&gt;
                                            Кардиганы
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-bathrobe&quot;&gt;
                                        &lt;a href=&quot;/shop/domodejda/&quot;&gt;
                                            Домашняя
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-yubki&quot;&gt;
                                        &lt;a href=&quot;/shop/yubki/&quot;&gt;
                                            Юбки
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-tolstovki&quot;&gt;
                                        &lt;a href=&quot;/shop/kardigany/tolstovki/&quot;&gt;
                                            Толстовки
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-svitshoty&quot;&gt;
                                        &lt;a href=&quot;/shop/tuniki/svitshoty/&quot;&gt;
                                            Свитшоты
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-plyazh&quot;&gt;
                                        &lt;a href=&quot;/shop/plyazhnaya-odezhda/&quot;&gt;
                                            Пляжная
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-belye&quot;&gt;
                                        &lt;a href=&quot;/shop/nizhnee-bele/&quot;&gt;
                                            Нижнее&amp;nbsp;бельё
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;d-flex menu-h-big&quot;&gt;
                                    &lt;div class=&quot;col-md-4&quot;&gt;
                                        &lt;a href=&quot;/shop/bolshie-razmery/&quot;&gt;
                                            &lt;img src=&quot;/wa-data/public/shop/themes/topshopRoznica/img/fat.jpg&quot;&gt;
                                            Большие размеры
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-4&quot;&gt;
                                        &lt;a href=&quot;/shop/naryady-dlya-beremennykh/&quot;&gt;
                                            &lt;img src=&quot;/wa-data/public/shop/themes/topshopRoznica/img/milf.jpg&quot;&gt;
                                            Для беременных
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-4&quot;&gt;
                                        &lt;a href=&quot;/shop/elegantnyy-ekovelyur/&quot;&gt;
                                            &lt;img src=&quot;/wa-data/public/shop/themes/topshopRoznica/img/eco.jpg&quot;&gt;
                                            Из эковелюра
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;tree menu-men&quot;&gt;
                        &lt;a href=&quot;/shop/muzhskaya-odezhda/&quot;&gt;Мужчинам&lt;/a&gt;
                        &lt;ul class=&quot;menu-inner&quot;&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;d-flex&quot;&gt;
                                    &lt;div class=&quot;col-md-12 menu-kost&quot;&gt;
                                        &lt;a href=&quot;/shop/muzhskaya-odezhda/kostyumy/&quot;&gt;Костюмы&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-12 menu-maiki&quot;&gt;
                                        &lt;a href=&quot;/shop/muzhskaya-odezhda/mayki/&quot;&gt;Майки&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-12 menu-futbolki&quot;&gt;
                                        &lt;a href=&quot;/shop/muzhskaya-odezhda/futbolki/&quot;&gt;Футболки&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-12 menu-shorty&quot;&gt;
                                        &lt;a href=&quot;/shop/muzhskaya-odezhda/shorty/&quot;&gt;Шорты&lt;/a&gt;
                                    &lt;/div&gt;
    								&lt;div class=&quot;col-md-12 menu-domodejda&quot;&gt;
                                        &lt;a href=&quot;/shop/muzhskaya-odezhda/bryuki/&quot;&gt;Брюки&lt;/a&gt;
                                    &lt;/div&gt;
    								&lt;div class=&quot;col-md-12 menu-bathrobe&quot;&gt;
                                        &lt;a href=&quot;/shop/muzhskaya-odezhda/khalaty/&quot;&gt;Халаты&lt;/a&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
    				&lt;li class=&quot;tree menu-child&quot;&gt;
                        &lt;a href=&quot;/shop/detskaya-odezhda/&quot;&gt;Детям&lt;/a&gt;
                        &lt;ul class=&quot;menu-inner&quot;&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;d-flex&quot;&gt;
                                    &lt;div class=&quot;col-md-3 menu-school&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/shkolnaya-forma/&quot;&gt;Школьная форма&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-futbolki&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/futbolki/&quot;&gt;Футболки&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-maiki&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/mayki-i-topy/&quot;&gt;Майки и топы&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-shorty&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/shorty/&quot;&gt;Шорты&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-yubki&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/yubki/&quot;&gt;Юбки&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-platya&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/platya/&quot;&gt;Платья&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-svitshoty&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/vodolazki/&quot;&gt;Водолазки&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-tuniki&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/tuniki/&quot;&gt;Туники&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-tolstovki&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/tolstovki/&quot;&gt;Толстовки&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-svitshoty&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/svitshoty/&quot;&gt;Свитшоты&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-bryuki&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/bryuki/&quot;&gt;Брюки&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-kostyumy&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/kostyumy/&quot;&gt;Костюмы&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-kostyumy&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/pizhami/&quot;&gt;Пижамы&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-3 menu-bathrobe&quot;&gt;
                                        &lt;a href=&quot;/shop/detskaya-odezhda/khalaty/&quot;&gt;Халаты&lt;/a&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;tree menu-house&quot;&gt;
                        &lt;a href=&quot;#&quot;&gt;Для дома&lt;/a&gt;
                        &lt;ul class=&quot;menu-inner&quot;&gt;
                            &lt;li&gt;
                                &lt;div class=&quot;d-flex&quot;&gt;
                                    &lt;div class=&quot;col-md-12 menu-suv&quot;&gt;
                                        &lt;a href=&quot;/shop/suveniry/&quot;&gt;Сувениры&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-12 menu-bel&quot;&gt;
                                        &lt;a href=&quot;/shop/postelnoe-bel/&quot;&gt;Постельное бельё&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-12 menu-pol&quot;&gt;
                                        &lt;a href=&quot;/shop/polotentsa/&quot;&gt;Полотенца&lt;/a&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;col-md-12 menu-ob&quot;&gt;
                                        &lt;a href=&quot;/shop/obuv/&quot;&gt;Домашняя обувь&lt;/a&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt; 
  39. Shannen

    Огромное спасибо! Второй спобос сразу сработал. Первый не пробовал, но только потому, что не понял.

  40. Алексей

    Добрый день. ЯЯпробую применить код из вашего примера, но не работает. Что я делаю не так?

     $(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;
    			      }
      <nav class="header-menu">
    					<ul>
    			     <li><a href="services">сервисы</a></li>
    			     <li><a href="portfolio">портфолио</a></li>
    			     <li><a href="profile">профиль</a></li>
    			     <li><a href="#">блог</a></li>
    			     <li><a href="contact">Контакты</a></li>
    			    </ul>
    	   </nav> 
  41. Avatar photo Степан => автор блога

    Пожалуйста!

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

;-) :| :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]

Метки: , , ,

Мои цели на 2018-2019:

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

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

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

4). Довести количество статей до 800

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

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

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

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716