Как сделать активный пункт меню через jQuery

Как сделать активный пункт меню через jQuery

4234324

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

В этом плане нам нужно будет создать легкий jQuery скрипт, который бы смог определять текущий url страницы и соотносить его с ссылками в меню. В том случае, если скрипт найдет совпадение, то он создаст на активном пункте меню класс, например, active. На этот класс вы сможете задать какой-угодно css стиль, например, другую заливку и цвет.

Код для определения текущего url в меню выглядит следующим образом:
<script>
$(document).ready (function () {
var pathes = window.location.pathname + window.location.search;
$.each($('.topnav li a'), function (){
if($(this).attr('href') == pathes) $(this).addClass('active');
})
});
</script>

Этот скрипт работает со структурой ul li a элементов. Родительский класс меню должен быть .topnav. Вы можете поменять его на свой. Понять работу скрипта вы можете используя кнопки ниже.

Главное условие работы скрипта - ссылки должны быть относительными (без домена). Из скачанного примера вы поймете о чем идет речь.

Если же говорить о юзабилити для сайтов, то помимо такого меню рекомендую использовать:

  • кнопку наверх, чтобы пожалеть палец пользователя, если сайт длинный;
  • мобильную версию сайта, чтобы его можно было просмотреть на разных устройствах
  • кнопки соцсетей, чтобы посетители не только могли сохранить ваш сайт у себя на страничке, но и автоматом помогали его продвинуть.

Конечно, пунктов может быть много, поэтому располагайте информацию так, чтобы ее легко было найти,

| | Как сделать активный пункт меню через jQuery | Достаточно приятно смотреть на те сайты, в которых все сделано для удобства пользователя. Например, если говорить о меню, то неплохо выглядят те из ни | http://blogprogram.ru/wp-content/uploads/2016/09/4234324-131x131.jpg

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>