Подсветка активного пункта меню с помощью JS.

Количество просмотров: 1259

В данной статье рассмотрим как реализовать на сайте подсветку(выделение) активно пункта в навигационном меню сайта. Данная задача встречается достаточно часто, т.к. выделение текущего пункта в меню помогает посетителям лучше ориентироваться на сайте. Пользователь с первого взгляда на блок навигации понимает где он сейчас находится. Удобно ведь.

Приступим к реализации. Для этого будем использовать следующий блок html кода который будет играть роль меню.


<nav class="nav">
<a href="/">Главная</a>
<a href="/o-nas">О нас</a>
<a href="/contact">Контакты.</a>
</nav>   

Наше тестовое меню конечно не очень большое, состоит всего из трех ссылок, но для примера подходит отлично.

Теперь напишем css класс, который мы будем добавлять активному пункту для его выделения.


.active{
	color:red; 
	font-weight:bold;
}

Отлично. Все готово. Теперь приступим к реализации. Для этого нам потребуется популярная js библиотека jQuery. Думаю вам не стоит рассказывать, что это. Перед реализацией убедитесь, что данная библиотека подключена к вашему сайту.

Теперь приступим к написанию необходимого нам кода.


$(function(){

    jQuery('.nav').find('a').each(function(){ // находим все ссылки в блоке с классом nav и перебираем их
	if($(this).attr('href')==window.location.pathname)  // если значение атрибута href ссылки равно текущему адресу страницы без хоста
	{
    $(this).addClass('active'); // то добавляем данному пункту наш css класс для выделения
    } 

});
});

Если по каким то причинам вы не можете или не хотите использовать библиотеку jQuery, то ниже представлен вариант, как сделать тоже самое с помощью чистого JS.



var el = document.querySelectorAll('.nav a'); // выбираем все ссылки в нашем меню
// и прогоняем через цикл

for(i=0;i<el.length; i++){ 
// если значение атрибута совпадает с урлом в браузере то
	if(el[i].href==window.location){
		el[i].className="active"; // добавляем нужный класс для выделения пункта
	}
}


Вот и все. Довольно быстро и просто. Осталось разместить данный код на странице или в подключаемом js файле, добавить в css новый класс и наслаждаться юзабильным меню с выделением.


comments powered by HyperComments

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх