Разработка, создание и продвижение сайтов в Гомеле - Как выделить активный пункт меню

Активным пункт меню становится при прописании ему какого-нибудь класса и выделении этого класса в 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;

    width: 300px;

    height: 36px;

    margin: 0 auto;

    padding: 0;

    color: #FFFFFF; 

    text-decoration: none; 

    text-shadow: 1px 1px 2px #333; 

    background: #6E146B; 

    background: -webkit-gradient(linear, left top, left bottom, from(#B495B5), to(#6E146B)); 

    background: -moz-linear-gradient(top, #B495B5,  #6E146B); 

    background: -o-linear-gradient(top, #B495B5 0%,#6E146B 100%); 

    background: gradient(linear, top,  #B495B5,  #6E146B); 

    border: 3px solid #6E146B; 

    border-radius: 11px; 

}



#menu ul {

    margin-left: 8px;

    padding: 0;

    list-style: none;

    line-height: normal;

}



#menu li {

    float: left;

}



#menu a {

    display: block;

    height: 26px;

    margin-bottom: 10px;

    margin-right: 3px;

    padding: 10px 17px 0px 10px;

    text-decoration: none;

    text-align: center;

    vertical-align: middle;

    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    font-weight: bold;

    color: #FFFFFF; 

}



#menu a:hover, #menu a.active{

    background: #B495B5; 

    background: -webkit-gradient(linear, left top, left bottom, from(#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%); 

    filter: progid:DXImageTransform.Microsoft.gradient

(enabled="true",startColorstr=#6E146B,endColorstr=#B495B5,GradientType=0);

    background: gradient(linear, top,  #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.length; i++){

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>) — он сработает всё равно только после загрузки всей страницы.

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

С отключённым яваскриптом подсветки активной ссылки не увидите.

Всё по-честному

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

Дата 2014-04-01 12:59:05

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

Вы не залогинены!

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

Логин:
Пароль:
Запомнить меня

Имя пользователя: