как выделить текущий пункт меню

Как выделить текущий пункт меню

Привет, сегодня будет статья о том как с помощью всего 5 строк кода выделить текущий пункт меню.
Не буду тянуть кота за помидоры))
Вот мое меню

<ul class="list-unstyled " id="menu">
<li><a href="/index.php " >Мои работы</a></li>
<li><a href="/interests.php">Интересы</a></li>
<li><a href="/press.php">Пресса </a></li>
<li><a href="/price.php">Цены</a></li>
<li><a href="/contacts.php">Контакты</a></li>
</ul>

Как видим нет в нем ничего необычного.


Время скрипта.

$(document).ready(function() {
var page_url;
if(location.pathname.split('/')[1]!=='') page_url = '/'+location.pathname.split('/')[1];
else {page_url='/index.php'};
$('#menu li '+'a[href*="'+page_url+'"]').addClass("active");
});
});

Немного о работе скрипта для выделения текущего пункта меню, свойство pathname объекта location возвращает путь загруженного элемента, а функция split('/')[1] возвращает массив элементами которого являются части строки( пути) разделенные слешем (/). В квадратных скобках функции split('/')[1] указан элемент массива. Далее всем ссылкам с href совпадающим с переменной page_url присвоим класс  active.

Вот этот класс

.active
{ background-color:#B4DAE6;padding-left: 25px;
}

В итоге активный пункт меню будет выделен с помощью другого фона и отступа слева.

как выделить текущий пункт меню

 


Добавить комментарий