Выделение пунктов меню с помощью JS

Данный пост навеян статьей habrahabr.ru/post/224185/ на Хабрахабре. Человек написал некоторый код на php, но недостатки его очевидны. Меню, сформированное на сервере, будет иметь различное представление html на различных страницах. Последний факт существенно усложняет кэширование и необоснованно раздувает кэш.

Пример, который я приведу, будет очень прост, но, тем не менее, это облегчит понимание работы JavaScript.

Постановка задачи

На сайте реализованы ЧПУ. Меню организует ссылки на главную страницу и основные разделы сайта.

Требуется, чтобы

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

В общем-то ситуация совершенно стандартная.

Базовый html для меню

Для наглядности буду использовать самый простой код.

Итак. Меню готово.

Стили

Чтобы наш пример обрел вид похожий на меню, добавим немного стилей.

Заметим, что последние 3 строки предназначены для выделения текущего и активного пунктов меню. Под "текущим" я понимаю пункт меню, соответствующий разделу сайта, в котором мы находимся. Под "активным" - пункт меню, над которым находится указатель мыши.

Теперь наше меню собственно немного напоминает меню. И имеет постоянную структуру. Осталось совсем мало - добавить динамики!

Оживление меню

Все остальные вещи для нас будет выполнять JavaScript и jQuery. Для выполнения нашей задачи мне послужит следующий код:

Итак, поясним код. И начнем пояснять с конца. Мне так интересней.

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

Работа функции initMenu заключается в последовательно вызове функции HightlightMemu, для каждого требуемого меню.

Функция HightlightMemu принимает два аргумента в нашем случае это выражение, для поиска всех ссылок нужного меню, и необязательный параметр - текущий url.

Работа HightlightMemu делится на 2 части. Сначала пробегаем в цикле все ссылки и навешиваем на них события mouseover и mouseout, которые выполняют подсветку пункта меню при наведении на него указателя мыши.

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

Заключение

В данной статье я привел лишь самую базовую конструкцию меню. Кстати подобным образом функционирует меню и на этом сайте.

К главному его достоинству я отношу легкость кэширования.

Недостатком данной реализации является отсутствие подсветки меню при отключенном JavaScript. Но последняя ситуация в настоящее время встречается крайне редко.

Кстати, приведенный код, полностью соответствует концепции ненавязчивого Javascript, и его можно внедрить на сайт, практически не меняя текущей верстки, т.е. с минимальными усилиями.

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

Дайте нам знать, что вы - живой человек. Для нас это важно!
Кликните, если плохо видно

Прежде чем высказать свое мнение, прочитайте пожалуйста: правила

Рейтинг@Mail.ru