Улучшаем реакцию меню

Pull-down — выпадающим меню, работающим на javascript, никого не удивить. Мне не нравится, что оно закрывается мгновенно, как курсор мыши выходит за край выпавшей секции. Немного промахнешься (особенно это часто случается с последними пунктами), и меню нужно открывать вновь.

В простых реализациях использутеся событие hover, в котором задаются две функции:

Когда курсор наводится на родительский пункт — меню разворачивается, когда фокус у контейнера теряется — меню сворачивается.

Мы сделаем так, чтобы между получением фокуса и разворачиваением меню, а также потерей фокуса, и соответственно, сворачиваем меню, можно было вставить задержку.

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

Идея в том, чтобы создавать для каждого контейнера меню пару уникальных объектов timeout. Один из них будет задавать задержку перед открытием меню, а второй — перед закрытием.

Для понимания, с чем мы работаем, я приведу пример HTML кода меню:

Корневые пункты меню мы отметили идентификаторами m1, m2 … Их мы будем использовать для создания уникальных переменных таймеров — tmIn{mN} и tmOut{mN}.

Я модифицировал hover, добавив в него генерацию таймеров. Если таймер не успел сработать, то он удаляется. В примере время разворачивания и свертывания меню одинаковое — 250 мс, время ожидания перед развертыванием меню — 100 мс, а время, после которого меню сворачивается при потере фокуса, — 500 мс.

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

Теперь с меню стало гораздо приятнее работать. Оно немного ожидает перед тем как свернуться и не выскакивает чуть стоит провести над ним мышью. :)

Написать комментарий

Мало букафф? Читайте есчо !

Как определить из скрипта, что fancybox popup уже открыт?

Декабрь 13, 2018 г.

Если пользуетесь jQuery плагином fancybox, то могли сталкиваться с тем, что необходимо увязать логику каких то других скриптов с фактом, показан ли попап ...

Читать

Связанные списки select с получением данных по ajax

Декабрь 15, 2016 г.

В прошлый раз я показывал как можно "на лету" создавать списки html select, данные которых содержались в специальном javascript массиве. Подготовить такой ...

Читать

 

Комментарии к «Улучшаем реакцию меню»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: