Длинное меню с прокруткой

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

Для таких случаев может пригодиться предлагаемое нами решение. Идея заключается в том, чтобы организовать прокрутку пунктов длинного выпадающего меню движениями курсора мыши:

Используем jQuery

Код и логика работы решения полностью приводится ниже и снабжен комментариями. Все достаточно просто.

  1. Устанавливаем максимальную высоту для выпадающего меню.
  2. Получив событие hover, выводим подменю.
  3. Вычисляем коэффициент скорости прокрутки на основании высоты подменю.
  4. Отслеживаем перемещения курсора мыши по меню.
  5. Прокручиваем меню при перемещениях курсора мыши, используя коэффициент скорости.
  6. При потере фокуса ввода закрываем меню.
HTML и CSS

Код HTML и CSS в данном случае достаточно стандартен, но специально для пользователей мы создали 9 различных цветовых схем стилей. Каждый из стилей Вы можете указать при настройке модуля.

При необходимости Вы можете подключить свой CSS для меню. 


Проверка

Решение было успешно опробовано в нескольких браузерах, включая IE 6.


Настройка

Настройки компонента полностью идентичны стандартному компоненту bitrix:menu.

Добавлены параметры выбора одного из 9 цветовых решений, а также указание высоты блока выпадающего меню. Скриншот с настройками ниже.


Загрузка

Coderoid - это группа профессиональных разработчиков, специализирующихся в первую очередь на разработке модулей для CMS Bitrix. 
Также у нас можно заказать разработку сайта на Bitrix, доработку существующего сайта, переработку используемых модулей на сайте, а также любые консультации по внедрению Bitrix в компании.
 

На правах рекламы