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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка "Вверх" с анимацией прокрутки окна

Февраль 16, 2020 г.

Ставший уже привычным элемент навигации внутри страницы - кнопка "Вернуться к началу страницы". Разберем как реализовать эту функцию. План следующий: Создать HTML код кнопки; (БОНУС) Прятать кнопку, если мы и так уже в самом верху страницы. ...

Читать

Перебор атрибутов HTML элемента в javascript

Февраль 17, 2016 г.

За использованием библиотеки jQuery как то забываешь о базовых свойствах и методах DOM  в javascript. Как получить весь набор аттрибутов HTML элемента? Получим ссылку на элемент HTML документа каким либо образом: [crayon-656c8b27c2c9a815240257/] ...

Читать

 

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

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



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