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

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

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

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

Можешь почитать и вот эту статейку "Как переехать на https бесплатно"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 4802 дня
  • Новостей: 613
  • Комменты: 257
  • Зарегистрированно : 744
  • Онлайн всего: [21]
  • Гости: [21]
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 30
  • Генерация страницы: 0.239сек
  • Потребление памяти: 5.329 Mb 
  •   Яндекс.Метрика