js Подсвечивание активной ссылки меню с помощью js 

Дата публикации  Дата изменения11.01.13  Комментарии2   Просмотры13855

Курсы

Подсвечивание активной ссылки меню с помощью javascript

1. Постановка задачи.

Условия:
Есть блок меню
Код:


<div id="menu">
<ul>
 <li>
 <a class="active_menu" href="http://test.into.by/">Главная</a>  
 </li>
 <li>
 <a href="?module=articles">Статьи</a>
 </li>
 <li>
 <a href="?module=forum">Форум</a>
 </li>
</ul>        
</div>

Нужно, чтобы класс "active_menu" перемещался по тегам <a> в соответствии с заложенным в них ссылками href="url"

2. Реализация.

Делай раз.
Поместите в заголовок <head>
Код:




Делай два.*
Размещаем в нужном месте элементы меню без классов
Код:


<div id="menu">
<ul>
 <li>
 <a href="http://test.into.by/">Главная</a>  
 </li>
 <li>
 <a href="?module=articles">Статьи</a>
 </li>
 <li>
 <a href="?module=forum">Форум</a>
 </li>
</ul>        
</div>

Делай три.
Чтобы код работал каждый раз при перезагрузке всей страницы, добавим перед тегом </body>
Код:
<script type="text/javascript">shineLinks('menu');</script>
Всё. Теперь нужно добавить класс "active_menu" в css файл.
Равно как и форматы id="menu", теги <ul> и <li>.

Пример горизонтального меню:
Код:



#menu {
    float: left;
    width: 700px;
}
#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}
#menu ul li a {
    float: left;
    display: block;
    width: 130px;
    height: 50px;
    padding: 17px 10px 0 0;
    margin: 0 30px 0 0 ;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    color: #6d450f;    
    font-weight: bold;
    outline: none;
}
#menu ul li a:hover, #menu ul li .active_menu {
    color: #fff;
    background: url(images/menu_hover.png)
}

На примере ReloadCMS вывод меню будет выглядеть так:
Код:



<div id="menu">
 <ul>
 <?rcms_show_element('navigation', '<li><a href="{link}">{title}</a></li>')?>
 </ul>        
</div> <!-- end of menu -->

3. Заключение.
В заключение отметим, что этот код будет работать и с несколькими меню, нужно только несколько раз вызывать функцию shineLinks('id') с нужным id. Естественно, id должен быть уникален для каждого <div>.

Бесплатные курсы

Категории: 

Теги: , , , ,

Оцените материал:

Рейтинг: 10.0/10 (1)

Схожие по тегам статьи

КомментарииКомментарии:

    Сергей

     

    Благодарен. Пригодился скрипт. Применил его в меню рубрик на сайте wordpress, чтобы активная ссылка стала не ссылкой. В вордпрессе почему-то try-catch не пошло. Убрал конструкцию – все заработало.

    coder hol es

     

    Спасибо за комментарий, рад, что пригодилось)

 

Старые →← Новые