Introduction aux Méga Menus

Les « Méga Menus » sont des menus avec une organisation complexe des informations.

À ne pas confondre avec les menus horizontaux « énormes »

Cette technique est souvent utilisée dans les grands sites, qui ont un nombre important de pages, pour améliorer la navigation.

Ils sont utilisés au lieu des menus déroulants, dans le but d’offrir plus d’espace aux options à la navigation ; mais vous pouvez les utiliser pour un site plus petit pour les rendre plus convivial.

Les seuls défauts que j’ai trouvés en utilisant ce type de menu sont :

-          Le paramétrage du comportement.

-          La difficulté pour les intégrer avec des sites dynamiques.

Construire un méga-menu n’est pas difficile pour ceux qui ont un minimum de connaissances en HTML et CSS,  néanmoins il ne faut pas sous-estimer l’importance de la position des éléments dans le menu.

Habituellement, le Méga-Menus s’ouvrent au passage de la souri (hover), en diminuant le nombre de clics pour accéder à la ressource demandée. Cependant le Méga-Menus peut être ouvert avec un clic.

Dimension fixe ou relative.

Dans un Méga Menu, la fenêtre ouverte peut être de dimension fixe ou relative.

En dimension fixe on doit faire attention à ne laisser pas trop d’espace libre. Le travail sur la taxonomie et le labeling de catégories devient alors très important. Souvent pour bien remplir on utilise des images.

Exemple de Méga Menu fixe

Avec une dimension relative nous pourrons adapter le Méga Menu à nos contenus.

Exemple de Méga Menu relatif

Avec ou sans images

Les deux versions sont possibles, néanmoins pourquoi ne pas profiter de l’espace pour utiliser des images captivantes ou mettre en évidence des offres ?

Sur la gauche un exemple de Méga Menu textuel et sur la droit un Méga Menu graphique.

Fond plein ou transparence

Les Méga Menus sont majoritairement à fond plein, mais pour certains sites les Méga Menus transparents peuvent donner une touche en plus. Du point de vue ergonomique, les Méga Menus à fond plein sont plus lisibles.

Attention au contraste !

Un Méga Menu doit faire partie intégrante du style du site, mais être clairement perçu comme un éléments de navigation. Dans certains sites, l’ouverture du Méga Menu est tellement intégrée graphiquement à la page, que l’utilisateur n’a pas l’impression d’utiliser un menu. Afin d’éviter ça, il est opportun de donner du contraste aux Méga Menus, avec la couleur de fond et les bordures.

Comportement

Les Méga Menus peuvent être ouverts ou par  survol ou par clic.

Ouverture par survol : le menu sera ouvert quand le pointeur de la souris passera sur l’item du menu. Ce comportement peut devenir gênant si le menu est positionné dans la trajectoire d’autres objets de navigation.

Ouverture par clic : nous demandons une action spécifique aux utilisateurs. Si le menu est dans la trajectoire d’autres objets de navigation importants pour la page, cela peut être la solution conseillée.

Fermeture par survol : le menu sera fermé quand le pointeur de la souris sortira de la zone du Méga Menu. Cette solution est conseillée aussi pour les mégas menus qui s’ouvrent par clic.

Fermeture temporisée : le menu sera fermé après quelque secondes, même si le pointeur reste sur la zone du Méga Menu. La meilleure solution selon moi est de temporiser la fermeture par survol d’un instant (1/2 seconde), afin d’avoir le temps de repositionner le pointeur de la souris.

Tutoriels

Existent différents tutoriel sur le Méga Menu, néanmoins je vous propose les plus connus et complets.

Liens intéressants

• 25 Examples of Mega Menus in Web Design
• Mega Drop Down Menus w/ CSS & jQuery
• How to Make a Mega Drop-Down Menu
• CSS3 Mega Dropdown Menu Tutorial
• 25 jQuery Tutorials for Improved Navigation Menus
• 25 Mega Menus for Your Design Inspiration
• Mega Drop-Down Menus – 46 exemples