Ссылки

Поиск

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Блок новостей в виде блога 2 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>
На сайте регистрация пользователей спамом 3 >>

Подробное техническое задание к договору точно определит, как будет выполнен будущий сайт.

RSS фиды

RSS Файлы
RSS Новости
RSS Форум

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

Подсвечивание активной ссылки меню с помощью 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>
Код: 
<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.length; i++){

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 {

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



Спрашивайте, если что непонятно. Комментарии (по делу) приветствуются.
Дата 2011-01-12 09:59:41

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

Вы не залогинены!

Комментарии

admin 2011-01-13 12:18:17
denis
В действии - вставлено в шаблон Red Blog (найдёте либо здесь в Полезных файлах, либо на оф. сайте ReloadCMS).

На моём сайте: работает в блоке \"Ссылки\" слева.

Верхнее меню подсвечивается на стороне сервера, т.к. оно выводит самое главное и подсвечивает даже вложенные в основное меню ссылки. Оно статично забито в скин. Менять в админке главное меню нельзя - да и не надо.

Боковое же второстепенное, и подсвечивается яваскриптом. Т.к. эти ссылки не важные, их можно редактировать в админке.

Я догадываюсь, ЧТО может не получаться: Главное меню нужно прописывать в Панели навигации не как module:index, а просто ./ Что символизирует путь к корню сайта.
localghost 2011-01-13 02:35:07
localghost
Хммм... а можно в действии поглядеть?

Это что то типа такого http://tinyurl.com/6447pqo хинта?

Он не корректно работает под хромом. Или я не правильно вас понял?

Кстати, как у вас с успехи с планами на этот, новый год? secret

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