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

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/

mike

mike

Chef de projet web, Mike assure la réussite de projets digitaux depuis 2011. Son but est d'aider les webmasters et les freelances à tirer le meilleur des outils comme WordPress, WooCommerce et Elementor. Sur ce blog il partage son expérience, ses astuces et les pépites dénichées sur le web. Mike aime les afters, faire des shoots de baskets et les films d'horreur,

Laisser un commentaire

Votre adresse e-mail 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.

Thématiques

Vous recherchez des astuces dans un secteur donné ? Vous pouvez accéder directement à la catégorie qui vous intéresse !