Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2016, 08:23
Новичок на форуме
Отправить личное сообщение для Andreij45 Посмотреть профиль Найти все сообщения от Andreij45
 
Регистрация: 09.04.2016
Сообщений: 6

Выделение активного пункта меню
Здравствуйте. Есть выпадающее меню на css. Хочется сделать подсветку активного пункта меню (родителя), но пока не выходит. Перепробованные варианты готовых кодов Javascript, не добавляют новый класс активному пункту. Буду благодарен за любую помощь.

<ul id="cssmenu">
        <li><a href="http://site.ru/">Главная</a>
                <ul>
                        <li><a href="http://site.ru/o-kompanii">О компании</a></li>
                        <li><a href="http://site.ru/collective">Наш коллектив</a></li>
                </ul>
        </li>
        <li><a href="http://site.ru/product">Наша продукция</a>
                <ul>
                        <li><a href="http://site.ru/product-1">Ссылка 1</a></li>
                        <li><a href="http://site.ru/product-2">Ссылка 2</a></li>
                        <li><a href="http://site.ru/product-3">Ссылка 3</a></li>
                        <li><a href="http://site.ru/product-4">Ссылка 4</a></li>
                        <li><a href="http://site.ru/product-5">Ссылка 5</a></li>
                </ul>
        </li>
        <li><a href="http://site.ru/contacts">Контакты</a>
        </li>
</ul>


ul#cssmenu {
        width:350px;
        margin: 0;
        border: 0 none;
        padding: 0;
        list-style: none;
        background: #003366;
        height: 30px;
        font: bold 12px/28px Verdana, Arial;
        border-left:#003366 1px solid;
}

ul#cssmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        float: left;
        display: inline;
        list-style: none;
        position: relative;
        height: 30px;
}

ul#cssmenu ul {
        margin: 0;
        border: 0 none;
        padding: 0;
        width: 160px;
        list-style: none;
        display: none;
        position: absolute;
        top: 30px;
        left: 0;
}

ul#cssmenu ul:after {
        clear: both;
        display: block;
        font: 1px/0px serif;
        content: ".";
        height: 0;
        visibility: hidden;
}

ul#cssmenu ul li {
        width: 150px;
        float: left;
        display: block !important;
        display: inline;
}

/* Main Menu */
ul#cssmenu a {
        border: 0px;
        padding: 0 10px;
        float: none !important;
        float: left;
        display: block;
        background: #003366;
        color: #FFFFFF;
        font: bold 12px/28px Verdana, Arial;
        text-decoration: none;
        height: auto !important;
        height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
        background: #FFFFFF;
        color:#003366;
        border-top:#003366 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
        border-top: 2px solid #FFFFFF;
        float: none;
        background: #003366;
        color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
        border-top: 2px solid #FFFFFF;
        background: #FFFFFF;
        color:#003366;
        border:#003366 1px solid;
}

ul#cssmenu ul ul {
        display: none;
        position: absolute;
        top: 0;
        left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
        display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
        display: block;
}


JavaScript добавлен для правильного отображения меню в браузерах IE.

function cssmenuhover()
{
        if(!document.getElementById("cssmenu"))
                return;
        var lis = document.getElementById("cssmenu").getElementsByTagName("LI");
        for (var i=0;i<lis.length;i++)
        {
                lis[i].onmouseover=function(){this.className+=" iehover";}
                lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}
        }
}
if (window.attachEvent)
        window.attachEvent("onload", cssmenuhover);

Последний раз редактировалось Andreij45, 09.04.2016 в 08:30.
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2016, 11:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,107

Andreij45,
$(function(){
     var url = window.location.href;
     $('[href="'+url+'"]').parents("ul").prev().addClass("active")
   })
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2016, 13:47
Новичок на форуме
Отправить личное сообщение для Andreij45 Посмотреть профиль Найти все сообщения от Andreij45
 
Регистрация: 09.04.2016
Сообщений: 6

Рони, спасибо большое! Подсветка родительского пункта работает. Но не могли бы вы еще подсказать что сделать, чтобы при нажатии на "Контакты" они тоже выделялись.
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2016, 16:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,107

Andreij45,
$(function(){
     var url = window.location.href;
     var a = $('[href="'+url+'"]');
     url.indexOf("contacts") == -1 && (a = a.parents("ul").prev());
     a.addClass("active")
   })
Ответить с цитированием
  #5 (permalink)  
Старый 09.04.2016, 17:33
Новичок на форуме
Отправить личное сообщение для Andreij45 Посмотреть профиль Найти все сообщения от Andreij45
 
Регистрация: 09.04.2016
Сообщений: 6

Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение активного пункта меню sergofedor06 jQuery 15 23.11.2015 12:15
Выделение активного пункта меню lemoral (X)HTML/CSS 1 13.04.2015 08:18
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активного пункта меню при ajax запросе faecker AJAX и COMET 6 04.09.2014 19:14
Выделение активного пункта меню blyskawka Javascript под браузер 2 28.10.2012 12:48