Un méga-menu est un point de navigation qui n'ouvre pas une liste étroite au survol, mais une large surface avec plusieurs colonnes, des images ou des indications. Pour les boutiques en ligne et les grands sites, c'est pertinent. Pour les petits sites d'entreprise, c'est le plus souvent le signe que la structure ne va pas.
Voici donc les deux : la mise en œuvre, et avant cela la question honnête de savoir si vous en avez besoin.
En avez-vous seulement besoin ?
Un méga-menu se justifie à partir d'environ vingt-cinq à trente pages cibles que l'on peut regrouper de manière sensée — une boutique avec de nombreuses catégories, un organisme de formation avec une offre de cours étendue, un fabricant avec plusieurs lignes de produits.
Pour un site de huit pages, c'est une fin en soi. Si vous utilisez un méga-menu pour répartir huit entrées sur une grande surface, cela ne paraît pas plus professionnel, mais indécis.
Et si vous avez le sentiment que votre navigation ne tient pas sans méga-menu, alors vous n'avez pas un problème de menu, mais trop de pages. La meilleure voie consiste alors à regrouper les contenus, pas à agrandir la navigation.
Mise en œuvre avec Elementor
Elementor Pro propose depuis quelque temps son propre widget de méga-menu. C'est la voie la plus simple, parce que la structure du menu et la mise en forme se trouvent au même endroit.
Elementor Pro : le widget de méga-menu et le Theme Builder dans lequel vous l'utilisez font partie de la version Pro. Découvrir Elementor Pro
Le déroulé :
- Le menu lui-même se crée comme d'habitude sous Apparence → Menus. La structure — entrées principales et sous-entrées — naît là, pas dans Elementor.
- Dans le Theme Builder, vous ouvrez votre en-tête ; la manière de le créer est décrite dans Theme Builder pour l'en-tête et le pied de page.
- Vous insérez le widget de méga-menu et sélectionnez le menu.
- Pour chaque entrée principale qui doit recevoir une large surface, vous concevez le contenu déroulant directement dans l'éditeur — avec des conteneurs, du texte, des images, des boutons.
La zone qui se déploie est une zone Elementor normale. Autrement dit : tout ce que vous pouvez construire ailleurs fonctionne aussi ici. C'est précisément là que réside la tentation d'en faire trop.
Une structure qui a fait ses preuves
Trois à quatre colonnes, chacune avec un titre court et, en dessous, quatre à six liens. Dans la dernière colonne, quelque chose de visuel — une image, un renvoi vers une offre actuelle, un bouton de contact.
Ce que j'évite : plus de quatre colonnes, plus d'environ huit liens par colonne, et une image pour chaque lien. Un menu qu'il faut d'abord lire a manqué son but — il doit donner des repères, pas transporter du contenu.
La partie qui échoue le plus souvent : le mobile
Un méga-menu est un phénomène de bureau. Sur un écran de téléphone, il n'y a pas de large surface à déployer.
Veillez à ce qu'une liste sobre et empilée apparaisse sur mobile — entrées principales tapotables, sous-entrées dépliables en dessous. Les images et les éléments supplémentaires de la vue bureau doivent être masqués sur mobile.
Vérifiez à cette occasion trois choses sur un appareil réel : chaque entrée est-elle atteignable avec le pouce ? Peut-on ressortir sans recharger la page ? Et la liste peut-elle défiler lorsqu'elle est plus longue que l'écran ? Ce dernier point est le plus souvent oublié — avec un menu long, les entrées du bas sont sinon tout simplement inaccessibles. Ma méthode à ce sujet : Optimiser Elementor pour le mobile.
Ergonomie
Deux points souvent oubliés.
Navigation au clavier. Le menu doit pouvoir être parcouru avec la touche de tabulation, et la zone déployée ne doit pas se refermer aussitôt. Vérifiez-le une fois — cela prend une minute.
Ouverture temporisée. Une zone qui s'ouvre et se referme au moindre mouvement de souris est désagréable. Un court délai d'environ 150 millisecondes rend le comportement nettement plus calme.
Temps de chargement
Le contenu déroulant est chargé avec le reste, même si personne ne l'ouvre — et ce sur chaque page, parce qu'il se trouve dans l'en-tête. Un méga-menu avec douze images ralentit donc l'ensemble du site.
Gardez les images petites et peu nombreuses. Ce que cela signifie pour les valeurs mesurées est expliqué dans Elementor et les Core Web Vitals.
L'alternative qui est souvent meilleure
Au lieu d'un méga-menu : un menu principal épuré avec cinq à sept entrées et, derrière, des pages de vue d'ensemble bien construites qui mènent en profondeur.
C'est le plus souvent la meilleure solution — pour les visiteurs, parce que les repères sont plus clairs, et pour le moteur de recherche, parce qu'une page de vue d'ensemble avec un texte explicatif peut se positionner, alors qu'un menu ne le peut pas.
Si vous ne savez pas quelle structure convient à votre site, c'est l'une des questions que je clarifie tôt dans ma formation Elementor — avant que vous n'investissiez du temps dans une navigation qui ne résout pas le vrai problème.
Tags