Table des matières
Un méga menu est un grand dépôt de type panneau qui s'ouvre sous un élément de navigation et présente de nombreux liens à la fois en colonnes, au lieu de les empiler les uns sous les autres. Il remplace un sous-menu étroit et déroulable par un large aperçu d'une section entière du site, afin que les visiteurs voient leurs options au lieu de chasser à travers des menus imbriqués.
Vous en avez utilisé un sur presque tous les grands sites de vente au détail ou SaaS que vous avez visités Le menu des catégories d'Amazon, la liste déroulante des universitaires d'une université, le panneau produits et solutions d'une société de logiciels : tous les méga menus Ce guide couvre ce qui différencie un méga menu d'une liste déroulante régulière, quand le surplus de complexité est payant, quand ce n'est pas le cas, et comment en construire un dans Elementor sans payer pour une licence de constructeur de pages.
Qu'est-ce qu'un méga menu ?
Un méga menu est un panneau déroulant bidimensionnel, ce qui signifie qu'il utilise à la fois la largeur et la hauteur au lieu d'une seule pile verticale Plutôt qu'une colonne de six ou sept liens, un méga menu peut afficher quatre ou cinq colonnes, chacune avec son propre titre, sous-liens et parfois une icône, une image miniature ou un court bloc promotionnel.
Le déclencheur fonctionne de la même manière que n'importe quelle liste déroulante : passez ou cliquez sur un élément de niveau supérieur comme Produits, Services ou Boutique Ce qui apparaît est différent Une liste déroulante standard affiche une liste étroite Un méga menu ouvre un panneau pleine largeur ou presque pleine largeur pouvant contenir des dizaines de liens organisés par catégorie, selon recherche du groupe Nielsen Norman sur la façon dont les visiteurs scannent de grands panneaux de navigation.
Comment un méga menu diffère d'une baisse standard
La différence pratique se résume à trois choses : la largeur, la structure et le type de contenu.
- Largeur: une liste déroulante standard s'étend sur 200 à 300 pixels de large ; un méga menu peut s'étendre sur la majeure partie de la fenêtre d'affichage.
- Structure: une liste déroulante est une colonne ; un méga menu utilise plusieurs colonnes, souvent regroupées sous des sous-titres.
- Contenu: une liste déroulante est constituée de liens en texte brut ; un méga menu mélange souvent des liens avec des icônes, des images miniatures ou de courtes descriptions.
Cette différence structurelle est également la raison pour laquelle les méga menus nécessitent plus de planification. Une liste déroulante standard est facile à rassembler : listez six liens et vous avez terminé. Un méga menu a besoin d'une architecture d'information réelle : quelles catégories sont facturées en tête, ce qui se passe dans chaque colonne et comment le tout s'effondre sur un écran de téléphone sans place pour quatre colonnes côte à côte.
Menu Mega vs Dropdown vs Menu Off-Canvas
Les méga menus ne sont pas le seul moyen d'organiser beaucoup de navigation Voici comment les trois modèles les plus courants se comparent.
| Type de navigation | Meilleur Pour | Force | Attention à |
|---|---|---|---|
| Abandon standard | Sites avec une poignée de pages par section | Rapide à construire, pas de courbe d'apprentissage pour les visiteurs | Sorti de la pièce au-delà de 8 à 10 liens |
| Méga Menu | Grands catalogues, nombreuses catégories ou gammes de produits | Affiche toute la section en un coup d'œil, place pour les images et le regroupement | Nécessite une véritable conception et une véritable planification du contenu ; facile à faire trop |
| Menu Hors Toile | Sites mobiles d'abord, en-têtes minimaux | Garde l'en-tête propre, fonctionne bien sur les petits écrans | Cache la navigation derrière un robinet, en ajoutant une étape supplémentaire |
Quand un méga menu aide réellement
Un méga menu gagne en complexité lorsqu'un site dispose d'une navigation véritablement approfondie. Les magasins de commerce électronique proposant des dizaines de catégories de produits, les universités dotées de départements et de programmes, les sites multimédias comportant de nombreuses sections et les entreprises SaaS proposant plusieurs produits et cas d'utilisation ont tous tendance à dépasser rapidement une baisse standard.
Le test est simple : si votre liste déroulante actuelle a déjà besoin d'une barre de défilement, ou si les visiteurs atterrissent sur les pages de catégorie par recherche parce qu'ils n'ont pas pu les trouver dans l'en-tête, un méga menu résout un vrai problème au lieu d'en décorer un.
Quand un méga menu fait plus mal qu’il n’aide
Un petit site de brochure de cinq pages n'a pas besoin d'un méga menu, et en construire un de toute façon rend généralement le site plus compliqué qu'il ne l'est Si toute votre navigation tient dans six ou sept liens, un méga menu ajoute du poids visuel, un balisage supplémentaire et une chose de plus qui peut se briser sur un téléphone, sans réel avantage.
Un mauvais méga menu est pire qu'un simple menu Encadrant chaque page du site dans un panneau parce que “plus visible est mieux” enterre les liens que les visiteurs veulent réellement sous ceux qu'ils ne veulent pas Si chaque colonne semble tout aussi important, aucun d'entre eux ne sont. Coupez la liste dans les sections que les gens recherchent réellement avant de construire le panneau.
Modèles de conception de méga-menu courants
- Colonne de liens : listes de liens catégorisées simples, le modèle le plus courant et le plus facile à maintenir.
- Panneau en vedette ou promotionnel : colonnes de lien mélangées à une image promotionnelle, une bannière ou un bloc d'appel à l'action.
- Menu dirigé par une icône : chaque lien associé à une petite icône, commun dans les menus de fonctionnalités et de solutions SaaS.
- Méga menu à onglets : les catégories de niveau supérieur agissent comme des onglets à l'intérieur du panneau, en changeant les colonnes affichées.
Accessibilité et considérations mobiles
Un méga menu est aussi bon que son support clavier Chaque déclencheur doit s'ouvrir à la fois sur le vol stationnaire et sur la mise au point, puisqu'un visiteur qui passe à travers l'en-tête avec un clavier ne peut rien ajouter aria-expanded à la gâchette et aria-haspopup ainsi, les lecteurs d'écran annoncent qu'un panneau est disponible et s'assurent qu'Escape ferme le panneau et renvoie le focus sur le déclencheur.
Sur les téléphones, il n'y a pas de place pour quatre colonnes côte à côte, donc la plupart des méga menus s'effondrent en accordéon empilé sous une icône de hamburger Testez la version effondrée comme un vrai visiteur : les cibles de pression doivent être suffisamment grandes pour un pouce, et la liste ne doit pas prendre plus de défilement pour atteindre le bas que la page qu'elle protège.
Comment créer un méga menu gratuit dans Elementor
La méga option de menu d'Elementor se trouve derrière Elementor Pro, à l'intérieur du composant Menu imbriqué couvert dans Elementor documentation du méga menu. Si vous êtes sur la version gratuite d'Elementor, ce chemin est fermé.
Le Extension de menu principal Addons Mega vous obtient le même résultat sans Elementor Pro. Il transforme n'importe quel élément de votre menu de navigation WordPress existant en un déclencheur pour un panneau Elementor entièrement conçu en dessous, et c'est l'un des dizaines d'outils du Bibliothèque de widgets et d'extensions Master Addons.
- Installez et activez Master Addons (gratuitement) aux côtés d'Elementor, puis activez l'extension Mega Menu depuis Master Addons → Extensions.
- Accédez à Apparence → Menus ou ouvrez votre en-tête dans le Constructeur de thèmes Master Addons si c'est là que vit votre en-tête et activez Activer le méga-menu. Un badge Master Mega violet apparaît à côté de chaque élément du menu ; cliquez sur le badge de l'élément que vous souhaitez transformer en méga menu.
- Activez Mega Menu sur cet élément, puis cliquez sur Modifier avec Elementor pour concevoir le panneau : colonnes, images, icônes ou blocs promotionnels, quels que soient les besoins de la section.
- Définissez la largeur du panneau, pleine largeur ou contenu, puis publiez-le et vérifiez-le sur le bureau et sur un vrai téléphone.
Vous voulez le voir d'abord dans une mise en page finie ? le Démo Mega Menu et le Section Navbar au charbon et méga menu les deux affichent l'extension dans un en-tête en direct.
Foire aux questions
Que signifie méga menu ?
Un méga menu est un grand panneau déroulant à plusieurs colonnes qui s'ouvre sous un élément de navigation et affiche de nombreux liens à la fois, souvent regroupés par catégorie et associés à des icônes ou des images Il remplace une seule liste étroite par un aperçu plus large et organisé d'une section de site.
Comment créer un méga menu ?
Transformez un élément de menu de navigation ordinaire en un méga déclencheur de menu, puis concevez le contenu du panneau : colonnes de liens, titres et images ou icônes optionnelles Dans WordPress et Elementor, un plugin comme Master Addons Mega Menu gère le déclencheur et vous permet de construire le panneau visuellement, de sorte que vous n'avez pas besoin de coder manuellement le balisage déroulant.
Quelle est la différence entre un menu régulier et un méga menu ?
Un menu déroulant régulier montre une seule colonne étroite de liens texte Un méga menu ouvre un panneau plus large avec plusieurs colonnes, et mélange souvent dans des images, des icônes ou de courtes descriptions à côté des liens Les menus réguliers conviennent à une poignée de pages ; les méga menus conviennent aux sites comportant de nombreuses catégories ou sections.
Quels sont les avantages d'utiliser un méga menu ?
Un méga menu affiche une section entière du site en un coup d'œil au lieu de forcer les visiteurs à ouvrir et rouvrir les sous-menus imbriqués Il réduit le nombre de clics pour atteindre une page profonde, vous donne de la place pour des repères visuels comme des icônes ou des vignettes, et fonctionne bien pour les magasins, les universités et les sites logiciels avec beaucoup de catégories à organiser.
Le menu Max Mega est-il gratuit ?
Max Mega Menu, un plugin WordPress autonome, a une version gratuite sur WordPress.org avec des modules complémentaires payants pour des fonctionnalités supplémentaires Si vous construisez déjà dans Elementor, l'extension Master Addons Mega Menu est une alternative gratuite qui conçoit le panneau avec l'éditeur Elementor au lieu d'une interface menu-builder séparée.
Comment créer mon propre menu ?
Construisez d'abord votre menu de navigation sous Apparence, puis Menus dans WordPress, en ajoutant les pages et les liens que vous souhaitez dans l'ordre où les visiteurs doivent les voir Une fois ce menu existant, vous pouvez transformer n'importe lequel de ses éléments en un méga déclencheur de menu et concevoir le panneau déroulant au-dessus de celui-ci.
Lecture Connexe
