РазделыСтатьиРазработка сайтов → Как выделить активный пункт меню

Активным пункт меню становится при прописании ему какого-нибудь класса и выделении этого класса в CSS.

Выделять класс, чтобы он отличался от других, проще и лучше всего яваскриптом. Можно и на сервере с помощью PHP добавлять класс к ссылке меню, но на яваскрипте лучше.
И вот почему.
1. Этот функционал не критичен — и без выделенного пункта меню всё будет работать. А «критичный» функционал лучше не делать на яваскрипт — ибо он есть не на всех устройствах, на которых могут просматривать Ваш сайт.
2. Выделение пункта меню создает нагрузку на стороне клиента, а не сервера — а это плюс.
3. При добавлении класса яваскриптом не нужен запущенный сервер, чтобы показать кому-либо результат своей верстки. Проще говоря, для предпросмотра верстки PHP не нужен — нужны только html+css+javascript.

Теперь разберём как это сделать на примере.
Код: HTML

<div id="menu">

 <
ul>
   <
li><a href="./">Главная</a></li>
   <
li><a href="?module=articles">Статьи</a></li>
   <
li><a href="?module=articles&c=articles&b=6&a=26">Эта статья с подсветкой адреса</a></li>
   <
li><a href="?module=sendmail">Обратная связь</a></li>
  </
ul>
</
div>
В CSS мы зададим стили и градиенты меню. А активному меню зададим градиент тот же, как и всем, но в другую сторону.
Например — у всего меню градиент идет от света вверху к тени внизу, а у активного меню наоборот. Возможности CSS3 помогут нам в этом:
Код: CSS

#menu {

    
display:block;
    
width300px;
    
height36px;
    
margin0 auto;
    
padding0;
    
color#FFFFFF; 
    
text-decorationnone
    
text-shadow1px 1px 2px #333; 
    
background#6E146B; 
    
background: -webkit-gradient(linearleft topleft bottomfrom(#B495B5), to(#6E146B)); 
    
background: -moz-linear-gradient(top#B495B5,  #6E146B); 
    
background: -o-linear-gradient(top#B495B5 0%,#6E146B 100%); 
    
backgroundgradient(lineartop,  #B495B5,  #6E146B); 
    
border3px solid #6E146B; 
    
border-radius11px
}

#menu ul {
    
margin-left8px;
    
padding0;
    list-
stylenone;
    
line-heightnormal;
}

#menu li {
    
floatleft;
}

#menu a {
    
displayblock;
    
height26px;
    
margin-bottom10px;
    
margin-right3px;
    
padding10px 17px 0px 10px;
    
text-decorationnone;
    
text-aligncenter;
    
vertical-alignmiddle;
    
text-transformuppercase;
    
font-familyArialHelveticasans-serif;
    
font-size12px;
    
font-weightbold;
    
color#FFFFFF; 
}

#menu a:hover, #menu a.active{
    
background#B495B5; 
    
background: -webkit-gradient(linearleft topleft bottomfrom(#6E146B), to(#B495B5)); 
    
background: -moz-linear-gradient(top#6E146B,  #B495B5); 
    
background: -o-linear-gradient(top#6E146B 0%,#B495B5 100%); 
    
background: -ms-linear-gradient(top#6E146B 0%,#B495B5 100%); 
    
filterprogid:DXImageTransform.Microsoft.gradient
(enabled="true",startColorstr=#6E146B,endColorstr=#B495B5,GradientType=0);
    
backgroundgradient(lineartop,  #6E146B,  #B495B5); 
}
Теперь осталось «навесить» активный пункт меню с помощью яваскрипт.
То есть задать класс "active" текущей ссылке.

Шаг первый — создадим подсвечивающую функцию. Будем вызывать её на каждом меню. Пока у нас одно, но вдруг будет много — потом потребуется дописать лишь строчку.
Код: Javascript

<script type="text/javascript">

//<![CDATA[
function shineLinks(id){
try{
var 
el=document.getElementById(id).getElementsByTagName('a');
var 
url=document.location.href;
for(var 
i=0;i<el.lengthi++){
if (
url==el[i].href){
el[i].className 'active';
};
};
}catch(
e){}
};
//]]>
</script>
Вставьте код функции в <head> своего сайта, чтобы она уже была определена в документе до того, как он загрузится.

Теперь осталось её вызвать в конце документа, лучше всего перед закрытием <body>, чтобы подсветить все ссылки внутри id="menu"*
Код:

<script type="text/javascript">shineLinks('menu');</script>

*Внизу страницы код вызывается затем, чтобы страница полностью загрузилась на момент его срабатывания.

Как видим, даже без использования jQuery на нативном яваскрипт — всё просто.

Но если у Вас на странице подключен jQuery, то всё ещё проще.
Можно обойтись вовсе без функции, а код более прост и понятен:
Код: Javascript

<script type="text/javascript">

//<![CDATA[
$(function() {
    var 
url=document.location.href;
    $.
each($('#menu a'),function(){
    if(
this.href==url){$(this).addClass('active');};
    });
    });
//]]>
</script>
Использование jQuery даёт ещё то преимущество, что писать этот код можно в любом месте (а не перед <body>) — он сработает всё равно только после загрузки всей страницы.

Ну и по традиции — в конце результат:

С отключённым яваскриптом подсветки активной ссылки не увидите.
Всё по-честному
ok
Остаётся добавить, что код только кажется сложным из-за того, что мы добавили к меню градиенты с помощью CSS. А так меню можно подсвечивать гораздо проще. Например выделять жирным с помощью font-weight:bold. Или задавать другой фон картинкой — как пожелаете.
01.04.2014 11:59 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.