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

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

irbees2008 irbees2008 Опубликовано - 10 - марта Меню и навигация
1439 - 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 = ' задаёте свои стили';

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

Можешь почитать и вот эту статейку "Получил сертификат SSL. Как настроить редирект с http на https"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [10]
  • Гости: [10]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 31
  • Генерация страницы: 0.171сек
  • Потребление памяти: 4.933 Mb 
  •   яндекс.ћетрика