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

• Меню 1
  • Пункт меню 1
  • Пункт меню 2
  • Пункт меню 3
  • Пункт меню 4
  • Пункт меню 5
  • Пункт меню 6
  • Пункт меню 7
  • Пункт меню 8
  • Пункт меню 9
  • Пункт меню 10
  • Пункт меню 11
  • Пункт меню 12
  • Пункт меню 13
  • Пункт меню 14
  • Пункт меню 15
  • Пункт меню 16
  • Пункт меню 17
• Меню 2
  • Test 1
  • Test 2
  • Test 3
  • Test 4
  • Test 5
• Меню 3
  • Test 1
  • Test 2
  • Test 5
• Меню 4
  • Test 1
  • Test 5
• Меню 5

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

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

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

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

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

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

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