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

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

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

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

Можешь почитать и вот эту статейку "Прелоадер с затемнением фона"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 671
  • Онлайн всего: [32]
  • Гости: [31]
  • Поисковики: [1] Google
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 29
  • Генерация страницы: 0.304сек
  • Потребление памяти: 5.398 Mb 
  •   Яндекс.Метрика