Хаки и Скрипты Next Generation CMS

Выделяем активную страницу в меню

irbees2008 irbees2008 Опубликовано - 10 - марта Меню и навигация
1396 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html

Многие сталкивались с такой проблемкой , как выделить активную страницу в меню.
Часто в готовых шаблонах такой функционал уже есть , но готовый шаблон для нас не подходит, а если берем готовый то надо переделать,поставить новое меню, и хоп там нет такого функцонала. Но выход как всегда есть.

Как всегда немного погуглив и пояндексил нашел два простых варианта на JS, и этот код легко встраивается в любой шаблон .
Итак вариант 1:
Немного стилей для примера

Код:
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}

Само меню вот такое простенькое
Код:
<div id="msgText">
<a href="1.html">Ссылка1</a>
<a href="2.html">Ссылка2</a>
</div>

И последнее сам JS

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

Ну с первым вариантом все,Вариант 2:
Добавляем в секцию 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>

Ну и в тело сайта само меню
Код:
<ul class="menu">
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
</ul>

В скрипте в этой строке
Код:
 style.cssText = ' задаёте свои стили';

Вот и все,пользуемся, все просто дальше некуда.Что не понятно спрашивайте отвечу.

Можешь почитать и вот эту статейку "Тег hr /"

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Обновленное

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3297 дней
  • Новостей: 539
  • Комменты: 252
  • Зарегистрированно : 569
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковики: [1] Google
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 29
  • Генерация страницы: 0.294сек
  • Потребление памяти: 4.926 Mb 
  •   яндекс.ћетрика