Автоматическое выделение нужного пункта меню на сайте с помощью jQuery

в 13:16, , рубрики: javascript, jquery, menu, метки: , ,

Вступление

Занимаюсь сайтостроением около года, и стремлюсь к оптимизации кода, насколько это возможно.
Как говорится, «Лень — двигатель прогресса», ведь именно лень подтолкнула меня к идее оптимизировать меню на сайте. Сначала я делал так:

  • Создавал меню отдельно в каждой html-странице.
  • В каждой странице выделял тот пункт меню, который соответствует адресу данной страницы.

Этой осенью я написал собственную CMS на PHP+jQuery, и с тех пользуюсь такой системой:

  • Пишу меню в отдельном файле menu.php.
  • Подключаю файл с меню в каждую страницу сайта через include().

В результате для изменения меню мне нужно редактировать только один файл menu.php, а изменения отобразятся автоматически во всём сайте. Думаю, это очевидно и является грамотным подходом к сайтостроению.
Но я задался вопросом — как теперь выделять ссылку в меню, для того, чтоб пользователь ориентировался, на какой странице сайта он находится? Делюсь своим видением решения данного вопроса.
Принцип такой: получаем текст из адресной строки, отсекаем название сайта или же часть пути до названия страницы, далее находим в меню ссылку, адрес которой соответствует полученному значению, и выполняем действия с этой ссылкой. Но я пошёл ещё дальше и решил не только выделять нужную ссылку в меню, но и добавлять текст после неё (который также получаю из адресной строки и преобразовываю). Приятного чтения!

Подготовка

Качаем библиотеку jQuery и подключаем её к веб-странице между тэгами head. Также подключаем файл, в котором мы напишем скрипт.

<script type="text/javascript" src="jquery.1.8.3.js"></script>
<script type="text/javascript" src="menu.location.js"></script>

Процесс

В нашем файле menu.location.js пишем

Код — часть 1 (выделение ссылки)

$(document).ready(function(){

	// получаем текст из адресной строки
	var locationFull = (document.location.pathname);
	// отрезаем все слэши и всё, что находится перед ними (в зависимости от сложности структуры адреса нужно будет менять код)
	var currentPage= locationFull.replace(/.+[\/]/, "")
	// в блоке с меню (div id="menu") находим ссылку (а), адрес которой соответствует полученному (уже очищенному) значению из адресной строки.
	var currentLink = $('#menu a[href="'+ currentPage +'"]');
	// если совпадение найдено, добавляем класс к данной ссылке (или производим любые другие действия с ней)
	if ($(currentLink).val(currentPage)) { $(currentLink).addClass('menu-current-page'); };

});
Код — часть 2 (добавление комментария после выделенной ссылки)

К примеру, структура адресной строки выглядит так:

http://company.com/shop-man-jeans

где «shop» — это категория, а «man-jeans» название страницы со списком джинс.

$(document).ready(function(){

	// получаем текст из адресной строки
	var locationFull = (document.location.pathname);
	// отрезаем все слэши и всё, что находится перед ними - получаем "shop-man-jeans"
	var locationEnding = locationFull.replace(/.+[\/]/, "");
	// из полученного "shop-man-jeans" убираем первые 4 символа, и получаем "-man-jeans"
	var locationEndingCut = locationEnding.replace(/..../, "");
	// меняем все дефисы на дефисы, окружённые пробелами - получаем " - man - jeans"
	var locationParts = locationEndingCut.replace(/-/g, ' - ');
	// переводим на русский язык все допустимые варианты
	var locationCurrent = locationParts.replace('- man -', '- мужские').replace('- woman -', '- женские').replace('jeans', 'джинсы').replace('shirts', 'рубашки'); // и т. д.

});

В итоге из «http:// company.com/shop-man-jeans» мы получили " — мужские джинсы", и теперь можем добавлять полученный текст после текущей ссылки в меню.

Результат

Код — часть 3 (объеденение двух функций, весь код)

Я объеденил несколько функций предыдущего сприпта в одну строку (т.к. здесь уже не нужно подробно расписывать эту часть).

$(document).ready(function(){

	// получение имён подкатегории "shop" и страницы "- man - jeans" из адресной строки
	var locationParts = (document.location.pathname).replace(/.+[\/]/, "").replace(/..../, "").replace(/-/g, " - ");
	// замена английских имён на русские (варианты)
	var locationCurrent = locationParts.replace('- man -', '- мужские').replace('- woman -', '- женские').replace('jeans', 'джинсы').replace('tshirts', 'футболки'); // и т.д.

	// отсекание всего, что перед "shop" (http://company.com/) и после него (-man-jeans)
	var currentPage = (document.location.pathname).replace(/.+[\/]/, "").replace(/-.*/, "");
	// определение ссылки, которая соответствует имени категории открытой страницы
	var currentLink = $('#menu a[href="'+ currentPage +'"]');
	// если соответствующая ссылка в меню найдена, выполняем действия
	if ($(currentLink).val(currentPage)) {
		// добавляем класс данной ссылке
		$(currentLink).addClass('menu-current-page');
		// добавляем текст после данной ссылки
		$(currentLink).after(locationCurrent);
	};

});

Получаем результат как на картинке, только в моём практическом примере вместо «shop» было «supera»:
image
Это всего лишь пример того, как можно работать с document.location.pathname, надеюсь кого-нибудь натолкнёт на ещё более интересное решение. Удачи!

Автор: rafaylik

Источник

Поделиться

* - обязательные к заполнению поля