Comment créer un méga menu sur votre site WordPress (étape par étape)

Les méga menus vous permettent d'afficher une grande variété de liens et de catégories de contenu dans une mise en page structurée et facile à naviguer.

Cela peut grandement améliorer l'expérience de navigation des visiteurs en rendant la navigation de votre site plus intuitive et accessible.

Chez WPBeginner, nous utilisons un méga menu pour afficher nos liens les plus importants en haut de la page. Lorsque les utilisateurs cliquent dessus, un menu déroulant s'ouvre, révélant des liens clés supplémentaires. Cette configuration nous a permis de créer un menu de navigation propre et organisé, présentant un large éventail d'options sans rendre la page encombrée.

Dans cet article, nous vous montrerons comment ajouter facilement un méga menu à votre site WordPress, étape par étape.

Pourquoi ajouter un méga menu sur votre site WordPress ?

WordPress est livré avec un constructeur par glisser-déposer que vous pouvez utiliser pour créer toutes sortes de menus, y compris des menus déroulants, des menus d'en-tête, et plus encore. Il existe même des plugins qui vous permettent de créer des menus de navigation personnalisés dans les thèmes WordPress.

Cependant, si votre site a beaucoup de contenu, vous devrez peut-être créer un méga menu à la place. Cela vous permet d'ajouter des menus déroulants multicolonnes à la structure de menu standard de WordPress.

Vous pouvez utiliser les méga menus pour organiser votre contenu sous différents titres et sous-titres, afin que les visiteurs puissent trouver rapidement ce qu'ils recherchent. Par exemple, si vous créez une place de marché en ligne, vous pourriez organiser toutes vos catégories et sous-catégories de produits dans un méga menu.

Les méga menus peuvent également afficher du contenu riche à vos visiteurs, tel que des vidéos, du texte, une recherche et des articles récents.

Vous pouvez également ajouter des images, ce qui rend les méga menus plus faciles à parcourir.

Cela dit, voyons comment vous pouvez facilement ajouter un méga menu à votre site WordPress.

Comment créer un méga menu pour votre site WordPress

La façon la plus simple d'ajouter un méga menu à votre site WordPress est d'utiliser Max Mega Menu. Ce plugin vous permet d'ajouter du contenu riche à vos méga menus, y compris des vidéos, des galeries d'images, une recherche, et plus encore.

De cette façon, vous pouvez créer des menus plus engageants et utiles.

Vous pouvez également modifier le style du menu en ajoutant différentes couleurs, en changeant la taille de la police et en utilisant différentes icônes.

Tout d'abord, vous devrez installer et activer le plugin. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Activer les méga menus sur votre site WordPress

Après l'activation, accédez à la page Mega Menu » Emplacements des menus depuis le tableau de bord WordPress pour voir tous les différents emplacements où vous pouvez ajouter un méga menu.

Vous pourriez voir différentes options en fonction de votre thème WordPress.

Pour commencer, vous devrez activer les méga menus dans chaque emplacement où vous souhaitez les utiliser.

Pour ce faire, cliquez simplement pour développer un emplacement, puis cochez sa case « Activé ».

Après cela, vous pouvez modifier l'« Événement » qui déclenchera le méga menu.

Le réglage par défaut est « Survol de l'intention », ce qui signifie que le visiteur doit survoler le méga menu avec sa souris pendant quelques secondes pour le déclencher. Cela fonctionne bien pour la plupart des sites WordPress, mais vous pouvez également ouvrir le menu déroulant « Effet » et choisir « Survol » ou « Clic » à la place.

Si vous choisissez « Clic », le visiteur devra cliquer pour explorer le méga menu. Cela peut être utile si vous craignez que les visiteurs ne déclenchent le menu par accident, ce qui peut être frustrant.

Pendant ce temps, « Survol » ouvrira votre méga menu dès que le visiteur déplacera sa souris dessus. Cela peut encourager les visiteurs à explorer différentes zones de votre site, vous pourriez donc vouloir utiliser « Survol » sur des pages de destination ou la page d'accueil de votre site Web.

Après avoir pris cette décision, vous pouvez modifier la façon dont le menu s'ouvre à l'aide des paramètres « Effet ».

Max Mega Menu propose différentes animations que vous pouvez essayer, notamment le fondu et le glissement vers le haut. Vous pouvez également modifier la vitesse de l'animation. En essayant différentes animations, vous pouvez créer un méga menu qui capte l'attention du visiteur.

Si vous ne souhaitez utiliser aucune animation, ouvrez simplement le premier menu déroulant et sélectionnez « Aucun ».

Par défaut, Mega Menu n’utilise pas d’animations sur les appareils mobiles, car les smartphones et les tablettes ont généralement moins de puissance de traitement. Cependant, si vous souhaitez créer une animation unique pour les visiteurs mobiles, vous pouvez utiliser les paramètres de la zone « Effet (Mobile) ».

Si vous souhaitez tester vos méga menus sur mobile, consultez notre guide sur comment afficher la version mobile des sites WordPress depuis un ordinateur de bureau.

Si vous avez choisi « Clic » dans le menu déroulant « Événement », assurez-vous de sélectionner ensuite l'onglet « Avancé ».

Ici, vous pouvez utiliser le « Comportement de l'événement de clic » pour définir ce qui se passe lorsque le visiteur clique sur votre méga menu. Par exemple, le deuxième clic peut fermer le menu ou ouvrir un nouveau lien.

Il y a plus de paramètres que vous pouvez examiner, mais cela devrait suffire pour la plupart des blogs et sites Web WordPress.

Lorsque vous êtes satisfait de la configuration du plugin, cliquez sur « Enregistrer les modifications ».

Pour activer les méga menus pour plus d'emplacements, suivez simplement le même processus décrit ci-dessus.

Personnaliser l'apparence des méga menus sur votre site Web

La prochaine étape consiste à configurer l'apparence des méga menus sur votre site Web.

Vous pouvez le faire en sélectionnant l'onglet « Thèmes de menu » à gauche de l'écran.

Sur cet écran, vous pouvez modifier la direction des icônes de flèche, utiliser une hauteur de ligne différente, ajouter une ombre, et plus encore.

Lorsque vous êtes satisfait de vos paramètres, n'oubliez pas de cliquer sur « Enregistrer les modifications ».

Si vous souhaitez supprimer ces modifications à tout moment, cochez simplement la case « Réinitialiser le style du widget », puis cliquez sur « Enregistrer les modifications ».

Ensuite, vous pouvez personnaliser la barre de menu, qui est la barre que les visiteurs voient lorsque le menu est dans son état par défaut, réduit.

Pour apporter ces modifications, cliquez sur l'onglet « Barre de menu », puis utilisez les paramètres pour changer la couleur d'arrière-plan, le remplissage, le rayon des bordures, et plus encore.

Vous pouvez même créer un dégradé de couleurs en sélectionnant deux couleurs différentes dans la section « Arrière-plan du menu ».

Si vous faites défiler vers le bas, vous pouvez modifier l'apparence du menu de premier niveau.

C'est la première rangée d'éléments, visible lorsque le méga menu est dans son état réduit.

Comme ils sont si importants, vous voudrez peut-être faire ressortir les éléments du menu de premier niveau.

Par exemple, dans l'image suivante, nous utilisons une couleur d'arrière-plan différente.

Dans la section « État au survol », vous pouvez mettre en surbrillance l'élément de menu de premier niveau actuellement sélectionné.

Par exemple, dans l'image suivante, nous utilisons un effet de soulignement.

Cela peut aider le visiteur à voir où il se trouve dans le menu, ce qui le rend particulièrement utile pour les sites qui doivent avoir de grands méga menus.

Si vous ajoutez un état au survol, faites défiler jusqu'en bas de l'écran et cochez la case « Mettre en surbrillance l'élément actuel ».

Après cela, vous pouvez modifier l'apparence du sous-menu.

C'est le menu qui apparaît sous un parent de premier niveau, comme vous pouvez le voir dans l'image suivante.

Pour personnaliser le sous-menu, cliquez sur l'onglet « Méga Menus ».

Vous pouvez maintenant utiliser ces paramètres pour changer la couleur d'arrière-plan du sous-menu, augmenter le rayon pour créer des coins arrondis, ajouter du remplissage, et plus encore.

Vous ajoutez du contenu à vos méga menus à l'aide de widgets. Par exemple, vous pourriez ajouter un widget Galerie et afficher vos produits WooCommerce les plus populaires, ou intégrer un nuage de tags à l'intérieur du méga menu. Ces widgets peuvent fournir des informations supplémentaires, ou encourager les visiteurs à cliquer sur certains éléments du menu.

Vous pouvez personnaliser l'apparence de ces widgets en faisant défiler jusqu'à la section « Widgets ». Par exemple, vous pouvez modifier la couleur du titre du widget, augmenter la taille de la police, ajouter un espacement et ajuster l'alignement.

Sur cet écran, vous pouvez également personnaliser l'apparence des éléments de menu de deuxième niveau et de troisième niveau sur votre site Web, blog ou place de marché en ligne. Ce sont les enfants des éléments de menu de premier niveau.

Lors de la création de vos menus, il est possible d'ajouter quatre niveaux, voire plus, pour créer un méga menu imbriqué. Si vous faites cela, WordPress utilisera simplement le style de troisième niveau pour tous les niveaux suivants.

Vous pouvez le voir en action dans l'image suivante. Le deuxième niveau a un texte rouge, et les troisième et quatrième niveaux utilisent tous deux le même texte bleu.

Lorsque vous êtes satisfait de la configuration du menu, n'oubliez pas de cliquer sur « Enregistrer les modifications ».

Comment ajouter un méga menu sur votre site WordPress

Une fois que vous avez terminé la personnalisation du méga menu, il est temps de l'ajouter à votre site Web.

Accédez simplement à la page Apparence » Menus depuis la barre latérale d'administration.

Si vous souhaitez transformer un menu existant en méga menu, ouvrez le menu déroulant « Sélectionner un menu à modifier » et choisissez-le dans la liste. Sachez simplement que le menu que vous choisissez doit être attribué à un emplacement où vous avez activé la fonctionnalité de méga menu.

Si vous souhaitez commencer à partir de zéro, cliquez sur « Créer un nouveau menu », puis tapez un titre pour votre nouveau méga menu.

Vous pouvez ensuite sélectionner l'emplacement que vous souhaitez utiliser et cliquer sur « Créer un menu ». Encore une fois, il doit s'agir d'un emplacement où vous avez activé les méga menus.

Ajouter du contenu à votre menu WordPress

Après cela, ajoutez toutes les pages, articles, produits WooCommerce et tout autre contenu que vous souhaitez inclure dans le méga menu.

Pour des instructions étape par étape, consultez notre guide pour débutants sur comment ajouter un menu de navigation dans WordPress.

Ensuite, vous devrez organiser vos éléments dans les menus parents et sous-menus que vous souhaitez utiliser dans le méga menu. Pour créer un sous-menu, faites glisser un élément sous l'élément parent, puis faites-le glisser légèrement vers la droite avant de le relâcher.

Pour créer plusieurs niveaux, continuez simplement à faire glisser les éléments vers la droite pour qu'ils apparaissent décalés les uns sous les autres. Ceci est similaire à la création d'un menu déroulant dans WordPress.

Activer la fonctionnalité Mega Menu

Une fois terminé, cliquez pour développer les « Paramètres Max Mega Menu » et cochez la case à côté de « Activer ».

Dans cette boîte, vous pouvez également remplacer les paramètres par défaut du méga menu. Cela vous permet de créer des méga menus uniques pour différentes zones de votre site WordPress, alors n'hésitez pas à apporter les modifications que vous souhaitez.

Après cela, cliquez sur « Enregistrer ».

Créer la mise en page du méga menu

Maintenant, survolez le premier élément de niveau supérieur avec votre souris et vous verrez un nouveau bouton « Mega Menu ». Cliquez dessus.

Vous verrez maintenant tous les paramètres de cet élément de niveau supérieur.

Par défaut, Max Mega Menu utilisera le style flyout, où les sous-menus « s'envolent » depuis le côté. Pour créer un méga menu à la place, ouvrez le menu déroulant « Mode d'affichage du sous-menu » et choisissez « Mise en page standard » ou « Mise en page en grille ».

La mise en page standard affiche tous les sous-menus en colonnes.

Pendant ce temps, la mise en page en grille vous permet d'organiser les éléments des sous-menus en colonnes et en lignes.

C'est idéal si vous souhaitez afficher beaucoup de contenu, comme tous les produits numériques de votre boutique en ligne, ou si vous avez une mise en page très spécifique en tête.

Après avoir sélectionné la mise en page standard ou en grille, vous verrez tous les sous-menus attribués à cet élément parent.

Vous pouvez maintenant modifier la façon dont ces éléments sont organisés dans le méga menu.

Si vous utilisez la disposition standard, vous pouvez modifier le nombre de colonnes à l'aide du menu déroulant situé en haut à droite.

Si vous utilisez une disposition en grille, vous pouvez ajouter des colonnes et des lignes à l'aide des boutons « + Colonne » et « + Ligne ».

Lorsque vous êtes satisfait de la disposition, vous pouvez organiser les éléments du sous-menu en différentes colonnes et lignes en les faisant glisser et déposer.

Après cela, il est temps de modifier l'espace que chaque élément occupe dans la colonne. Max Mega Menu affiche la taille actuelle sous forme de fraction de la largeur totale disponible.

Par exemple, dans l'image suivante, les deux colonnes occupent la moitié de l'espace disponible.

Pour modifier la taille d'un élément, cliquez simplement sur ses boutons fléchés pour agrandir ou réduire la fraction.

Créez un méga menu adapté aux mobiles (disposition en grille uniquement)

Par défaut, Max Mega Menu affichera le même contenu sur les ordinateurs de bureau et les appareils mobiles. Cela peut poser problème avec les dispositions en grille, car les smartphones et les tablettes ont généralement des écrans plus petits, et le défilement horizontal peut être difficile.

Si vous utilisez la disposition en grille, vous pouvez créer des méga menus différents pour les appareils mobiles. Par exemple, vous pourriez utiliser moins de colonnes pour que les utilisateurs n'aient pas à faire défiler horizontalement. De cette façon, vous pouvez créer un menu WordPress prêt pour mobile.

Vous pouvez masquer des colonnes ou des lignes entières à l'aide de l'icône « Masqué sur mobile », qui ressemble à un petit téléphone portable.

Basculez simplement l'icône pour masquer et afficher différents contenus sur ordinateur et sur mobile.

Ajoutez du contenu riche avec les widgets de méga menu

Une fois cela fait, vous pouvez commencer à ajouter des widgets au méga menu. Cela vous permet d'afficher du contenu supplémentaire dans le sous-menu, tel que les commentaires récents, des vidéos, des galeries, et plus encore.

Par exemple, vous pourriez utiliser des images pour promouvoir une vente sur votre boutique en ligne ou mettre en avant vos derniers produits.

Pour ajouter un widget, cliquez simplement pour ouvrir le menu déroulant « Sélectionner un widget... ».

Vous pouvez maintenant choisir un widget dans la liste.

WordPress ajoutera automatiquement le widget à une colonne ou à une ligne, mais vous pouvez le déplacer vers un nouvel emplacement en le faisant glisser.

Pour configurer le widget, cliquez sur sa petite icône de clé à molette.

Ceci ouvre une fenêtre contextuelle où vous pouvez ajouter du contenu au widget et modifier ses paramètres.

Vous verrez différentes options en fonction du type de widget que vous créez. Par exemple, si vous ajoutez un widget de lecteur de musique audio au menu méga, vous verrez alors des paramètres où vous pouvez télécharger une piste audio.

Tous les widgets ont un champ « Titre » où vous pouvez ajouter du texte qui apparaîtra au-dessus du widget.

Lorsque vous avez terminé, cliquez sur « Enregistrer » pour sauvegarder vos modifications, puis sélectionnez « Fermer ». Pour ajouter d'autres widgets au menu méga, suivez simplement le même processus décrit ci-dessus.

Examiner les paramètres par défaut du menu méga

Ensuite, cliquez simplement sur l'onglet « Paramètres ».

Ici, vous pouvez utiliser des cases à cocher pour masquer ou afficher différents contenus dans le sous-menu.

Vous pouvez également masquer ou afficher le sous-menu sur les appareils mobiles et les ordinateurs de bureau, et modifier l'alignement afin que le sous-menu s'ouvre à gauche ou à droite du parent de niveau supérieur.

Si vous apportez des modifications aux paramètres par défaut, n'oubliez pas de cliquer sur « Enregistrer les modifications ».

Ajouter des icônes d'image au menu méga WordPress

Les icônes d'image aident les visiteurs à comprendre le sujet d'un élément de menu, sans même avoir à lire l'étiquette de navigation. Ceci est particulièrement utile pour les grands menus où un visiteur peut préférer scanner le contenu rapidement plutôt que de lire chaque étiquette de navigation.

Vous pouvez utiliser des icônes pour faire ressortir le contenu le plus important. Par exemple, vous pourriez encourager les visiteurs à finaliser leur achat en ajoutant une icône de panier à l'élément de menu « Paiement ».

Pour ajouter des icônes d'image à votre menu de navigation, cliquez sur l'onglet « Icône ».

Vous pouvez maintenant choisir n'importe quelle icône de tableau de bord dans la bibliothèque intégrée ou utiliser votre propre image. Si vous passez à Max Mega Menu Pro, vous aurez également accès à d'autres polices d'icônes, Genericons et FontAwesome.

Terminer la configuration du méga menu sur votre site WordPress

Après avoir parcouru tous ces paramètres, vous pouvez fermer la fenêtre contextuelle pour revenir à la page principale Apparence » Menus.

Vous pouvez maintenant répéter ce processus pour chaque parent de niveau supérieur.

Lorsque vous êtes satisfait de la configuration du méga menu, cliquez sur le bouton Enregistrer le menu pour le rendre actif.

Visitez maintenant le front-end de votre site web pour voir le méga menu en action.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un méga menu sur votre site WordPress. Vous pouvez également consulter notre guide étape par étape sur comment ajouter un bouton dans le menu d'en-tête de votre WordPress et notre tutoriel sur comment créer un menu de navigation flottant et fixe dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.