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

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

В этом плане нам нужно будет создать легкий 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. Вы можете поменять его на свой. Понять работу скрипта вы можете используя кнопки ниже.

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

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

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

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