2491
- 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 = ' задаёте свои стили';
Вот и все,пользуемся, все просто дальше некуда.Что не понятно спрашивайте отвечу.
Можешь почитать и вот эту статейку "Меню которое сворачивает пункты при уменьшении экрана"
Это тоже интересно
27.04.17Выводим Все новости
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.