РазделыСтатьиРазработка сайтов → Подсвечивание активной ссылки меню с помощью javascript

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

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

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

<div id="menu">

<
ul>
 <
li>
 <
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>
Код:

<SCRIPT type="text/javascript">

function 
shineLinks(id){
try{
var 
el=document.getElementById(id).getElementsByTagName('a');//ищем наш div в DOM
var url=document.location.href;//палим текущий урл
for(var i=0;i<el.lengthi++){
if (
url==el[i].href){
el[i].className 'active_menu';//если урл==текущий, добавляем класс
};
};
}catch(
e){}
};
</SCRIPT>
Делай два.*
Размещаем в нужном месте элементы меню без классов
Код:

<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 {

    
floatleft;
    
width700px;
}

#menu ul {
    
margin0;
    
padding0;
    list-
stylenone;
}

#menu ul li {
    
padding0px;
    
margin0px;
    
displayinline;
}

#menu ul li a {
    
floatleft;
    
displayblock;
    
width130px;
    
height50px;
    
padding17px 10px 0 0;
    
margin0 30px 0 0 ;
    
font-size13px;
    
text-aligncenter;
    
text-decorationnone;
    
color#6d450f;    
    
font-weightbold;
    
outlinenone;
}

#menu ul li a:hover, #menu ul li .active_menu {
    
color#fff;
    
backgroundurl(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>.

Спрашивайте, если что непонятно. Комментарии (по делу) приветствуются.
12.01.2011 09:59 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Комментарии

admin
denis
12:18:17 13 Январь 2011
В действии - вставлено в шаблон Red Blog (найдёте либо здесь в Полезных файлах, либо на оф. сайте ReloadCMS).
На моём сайте: работает в блоке \"Ссылки\" слева.
Верхнее меню подсвечивается на стороне сервера, т.к. оно выводит самое главное и подсвечивает даже вложенные в основное меню ссылки. Оно статично забито в скин. Менять в админке главное меню нельзя - да и не надо.
Боковое же второстепенное, и подсвечивается яваскриптом. Т.к. эти ссылки не важные, их можно редактировать в админке.
Я догадываюсь, ЧТО может не получаться: Главное меню нужно прописывать в Панели навигации не как module:index, а просто ./ Что символизирует путь к корню сайта.
localghost
localghost
02:35:07 13 Январь 2011
Хммм... а можно в действии поглядеть?
Это что то типа такого http://tinyurl.com/6447pqo хинта?
Он не корректно работает под хромом. Или я не правильно вас понял?
Кстати, как у вас с успехи с планами на этот, новый год? secret

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.