Créer un méga menu peut s’avérer utile si vous avez un grand nombre d’items ou sous-menus à présenter à vos visiteurs pour les orienter sur votre site.

Un méga menu est un menu composé de plusieurs catégories ou colonnes et éventuellement agrémenté d’images ou d’icones. Ils sont particulièrement utilisés sur les sites de vente en ligne proposant de nombreux produits par exemple.

De nombreux plugins proposent cette fonctionnalité. Nous avons choisi de vous présenter le plugin Divi Mega Menu de DiviEngine qui permet de créer un méga menu directement avec le Divi Builder en utilisant tous les modules natifs de Divi.

Sachez tout de même que si vous souhaitez un méga menu très simple et standard, il est possible d’en ajouter un sans avoir à utiliser de plugin.

Ajouter un mega menu à Divi sans plugin

Imaginons que vous utilisiez un menu avec plusieurs sous-menus en encore des sous-menus, donc quelque-chose de ce type :

On est d’accord, c’est un gros menu, mais ça peut arriver. Du coté front-end ça nous donne ceci :

La navigation pour le visiteur peut donc vite se retrouver compliquée et il peut avoir des difficultés à trouver l’information qu’il recherche.

Heureusement pour nous, Divi a tout prévu. Le thème embarque nativement la possibilité de créer un méga menu simple sans rentrer dans le code.

Pour le mettre en place il suffit d’ajouter la classe CSS mega-menu au menu que l’on souhaite. Ici par exemple je vais appliquer cette classe à l’item menu 1.

Sur la page d’administration du menu dans WordPress, cliquez sur le bouton Options de l’écran tout en haut à droite et cochez la case Classes CSS :

Une nouvelle case à remplir apparait maintenant sur nos items de menus.

Ouvrez le menu que vous voulez transformer en mega menu et assignez-lui la classe CSS mega-menu comme ici :

Sauvegardez et retournez voir votre menu sur le site. Vous avez maintenant un méga menu prêt à l’emploi :

Si vous voulez améliorer le design, allez faire un tour sur notre tutoriel pour ajouter des icônes au menu et ajouter un peu de CSS pour le peaufiner.

Ajouter un mega menu avec l’extension Divi Mega Menu de DiviEngine

Divi Mega Menu est une extension développée par DiviEngine, qui sont également les créateurs de BodyCommerce que je citais dans mon article Personnaliser vos pages WooCommerce avec le Divi Builder.
Elle est vendu à partir de 7‎£ pour l’utilisation sur un site et jusqu’à 35‎£ pour une utilisation illimitée.
Elle vous permet de créer votre méga menu en utilisant tous les modules de Divi, mais aussi la mise en page utilisant les sections ou lignes.

Une fois Divi Mega Menu installé et activé, un nouvel onglet Divi Engine apparait dans l’administration de WordPress. Vous y trouverez tous les réglages liés au plugin.

Vous avez tout d’abord la possibilité de rendre le menu mobile fixe via les options, mais sachez que le méga menu sera donc lui aussi fixe et utilisera 70% de la hauteur de l’écran si vous cochez cette option :

Passons maintenant à la création de notre méga menu. Cliquez sur le menu Divi Engine -> Divi Mega Menu pour afficher la liste de vos mégas menus.
Vous n’en avez pas encore et c’est normal, mais ça vous servira plus tard.

Cliquez sur Add New en haut pour créer le premier et activez le Divi Builder.
Nous voici donc dans l’interface de création :

Je vous décris rapidement les options de la barre latérale droite :

• Custom Identifier (css class) : vous allez devoir ici définir une classe CSS de votre choix, sans . devant et ne contenant que des lettres. Cette classe sera à réutiliser ensuite dans le menu Apparence -> Menu pour définir l’item sur lequel sera injecté le méga menu (de la même manière que lorsqu’on a ajouté la classe CSS de Divi plus haut pour créer un méga menu simple).
• Menu Animation : vous avez ici le choix entre six effets d’animation pour l’apparition du méga menu lorsque le visiteur clique dessus (apparition depuis la droite de l’écran, la gauche, le haut ou le bas, ou effet Flip horizontal ou vertical).
• Animation Duration : vous pouvez définir la durée de l’animation que vous avez choisie juste avant. Je vous conseille de ne pas mettre plus d’une seconde pour ne pas irriter vos visiteurs.
• Custom Width : cette option permet de définir la largeur de votre menu. Adaptez cette valeur suivant les modules que vous souhaitez afficher ou laissez la valeur par défaut.

Pour le reste, il s’agit du Builder classique dont vous avez l’habitude.

Voici pour l’exemple de ce tutoriel le méga menu que j’ai créé, censé présenter les plugins Divi Visual Footer et Dark Divi :

Deux colonnes, des modules Textes, Images et Boutons. Tout ce qu’il y a de plus standard…

Notez la classe que j’ai assigné à mon menu à droite : la classe CSS mega.

Retournons maintenant dans Apparence -> Menus pour attribuer cette classe CSS au menu que nous voulons transformer en méga menu. Ici ce sera l’onglet Menu 6 :

Et voila le résultat obtenu :

Avouez que le résultat est plutôt sympa et met en valeur les différents plugins ici. Vous pouvez bien sûr utiliser tous les autres modules de Divi et créer des mises en pages bien plus complexes.

Vous pouvez également en ajouter à tous les menus que vous souhaitez de la même manière, mais faites tout de même attention à ne pas rendre votre menu trop tape-à-l’oeil pour vos visiteurs.

Conclusion

Créer un méga menu avec un minimum de design n’est jamais évident.

Si votre site en nécessite un, l’utilisation de la classe CSS mega-menu fournie par Divi peu vous suffire mais le menu ne sera pas aisé à personnaliser pour les non-initiés.

Divi Mega Menu est un plugin facile à mettre en place pour un prix plutôt abordable, et même s’il nécessite l’utilisation d’une ou plusieurs classes CSS (suivant votre nombre de méga menus), vous n’aurez besoin d’aucune connaissance spécifique pour l’utiliser pleinement.

Et vous, utilisez-vous des mégas menus sur votre site ? Dans quel cas ? Dites-nous tout en commentaires.

Partager