Comment résoudre le souci des survols de sous menu ?

Comment résoudre le souci des survols de sous menu ?
Temps de lecture estimé : 2 minutes

Le souci avec les sous menus

Les menus et sous menus se basent très généralement sur des survols d’éléments, c’est à dire que c’est parce que je survole l’élément de menu A que s’affiche le sous-menu A. Toutefois cela réduit donc la surface réactive uniquement à la forme de l’élément, et si vous avez le malheur de faire sortir le curseur de votre souris hors de l’élément, hop plus de sous-menu.

Qui n’a jamais pesté contre ce type de menu intransigeant concernant les sous-menus ?

Une des solutions possibles mise en place par le passé

Amazon avait résolu ce souci auparavant (ce ne semble plus être le cas) en créant dynamiquement pour chaque élément une zone « safe », et tant que le curseur reste dans cette zone il ne déclenche pas le survol d’un autre élément.

une zone créée dynamiquement qui ne génére pas de changement de sous menu

Ce n’est pas une technique très courante, car celles utilisées généralement se servent de timers pour estimer l’action qu’a voulu faire l’utilisateur (s’il reste un petit moment sur un sous élément c’est qu’il souhaite l’ouvrir)

Une solution avec des svg créés dynamiquement

 Une solution de ce type a été proposé par Hakim El Hattab lors de sa conférence au CSS day 2019. Elle repose sur la création à la volée de SVG (ceux étant créés mais non affichés) permettant de délimiter des zones

Voir la démo en ligne the Slides.com pattern library thingy.

Une autre solution basée sur Jquery

Grâce à Jquery, vous pouvez également utiliser la petite bibliothèque jQuery-menu-aim pour faire des méga menus responsive comme amazon.

Voir une démo en cliquant ici : https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html

Sources qui m’ont aidé pour cet article et que je vous recommande de lire également :
https://css-tricks.com/menus-with-dynamic-hit-areas/
https://github.com/kamens/jQuery-menu-aim
https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

Send a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.