Créer un menu déroulant sur WordPress avec le plugin Max Mega Menu

Dans cet article, je vous propose de partir à la découverte du plugin Max Mega Menu, un plugin pour créer un menu déroulant sur WordPress sans avoir besoin de coder.

Il offre un design personnalisable, plusieurs niveaux de sous-menus et de nombreuses options pour définir leur comportement (mode d'ouverture et de fermeture, effets visuels, etc). De quoi concevoir un bon menu, en particulier si votre site possède une arborescence complexe qui exige un peu plus qu'un simple menu sur une ligne !

Avant de créer un menu déroulant sur WordPress

Commençons par quelques conseils avant d'attaquer la création du menu déroulant à proprement parler.

Le menu d'un site est un élément déterminant de sa structure : il facilite la navigation, la compréhension des thématiques qui sont abordées. Par conséquent, le modifier n'est pas anodin.

Si vous voulez vraiment effectuer vos changements et vos tests en toute tranquillité, sans perturber les visiteurs, je vous conseille de travailler sur un staging, une copie de votre site conçue spécialement pour faire des tests. Le plugin WP Staging peut vous permettre de mettre en place cette copie facilement.

Vous pourrez ainsi tester différents designs, différents comportements de menu (ouverture au clic, ouverture au survol, etc) sans perturber l'expérience des visiteurs.

Autre point important : si vous utilisez un plugin de cache sur votre site, je vous conseille de le désactiver le temps du paramétrage du menu. Ca vous permettra de voir toutes les modifications avec réactivité, sans que l'ancienne version du site ne soit conservée en mémoire par votre site.

A présent, vous pouvez installer le plugin Max Mega Menu depuis le menu Extensions > Ajouter de votre administration WordPress. Pensez ensuite à l'activer.

Options de Max Mega Menu pour créer un menu déroulant

Max Mega Menu crée dans votre administration WordPress un nouveau menu baptisé "Mega Menu", depuis lequel vous pouvez accéder aux options de configuration. Il existe 4 rubriques principales :

• Emplacement de menu - C'est là que vous choisissez sur quel menu WordPress le plugin va "agir" (vous pouvez donc tout à fait avoir des menus qui font appel au plugin Max Mega Menu et des menus plus simples, gérés directement par votre thème) ;
• Thèmes de menu - C'est l'endroit où vous allez définir l'apparence visuelle de vos menus, avec une apparence par défaut et la possibilité de créer des profils visuels dédiés pour une apparence sur mesure ;
• Paramètres généraux - Vous pouvez ici définir la façon dont la mise en forme est gérée en termes de code, je vous en dirai plus par la suite ;
• Outils - Des options pour gérer le comportement du plugin !

Nous allons voir ensemble comment utiliser Max Mega Menu. Commençons par les menus réservés aux paramètres généraux, car ils sont plutôt rapides à évoquer.

Outils du plugin Max Mega Menu

La rubrique "Outils" vous permet de gérer le cache du menu, c'est-à-dire sa "mise en mémoire". Par défaut, le menu intègre en effet un système de mise en cache (ses fichiers vont être en quelque sorte "mémorisés" pour éviter d'être rechargés à chaque fois qu'un visiteur revient sur le site).

Le cache se vide automatiquement quand vous modifiez les réglages du menu (afin de ne pas garder en mémoire l'ancienne version mais de bien prendre en compte vos changements). Si vous souhaitez vider le cache à un autre moment, vous pouvez le faire ici.

Vous pouvez également, via le bouton "Effacer les données", effacer toutes les données que le plugin Max Mega Menu stocke dans la base de données de WordPress, cette option est surtout utile si vous comptez désinstaller le plugin.

Paramètres de Max Mega Menu

Du côté des paramètres généraux, c'est très simple : il y a juste une option qui concerne la gestion du code CSS. De quoi s'agit-il ? Le code informatique qui gère la mise en forme du menu est écrit en langage CSS.

Soit ce code va être rassemblé dans un fichier dédié (option "Sauver dans un fichier"), soit il va être directement intégré dans le code de vos pages web (option "Dans la section <head>"). Vous avez aussi la possibilité de ne générer aucun code CSS si vous comptez coder vous-même toute la mise en forme par exemple.

En termes de performance, il est souvent préférable de choisir l'option "Sauver dans un fichier" (les fichiers CSS peuvent ensuite être compressés et mis en cache via un plugin de cache comme WP Fastest Cache, WP Optimize ou autre).

Je vous rassure, le paramétrage de Max Mega Menu ne se limite pas à ces quelques options, ce serait un peu maigre pour créer un menu déroulant sur WordPress ! Le gros des options se situe directement dans le vif du sujet, au cours de la création d'un menu ou d'un thème de menu.

Créer un menu déroulant avec le plugin

Il y a ici deux options :

• Soit vous avez déjà créé un menu WordPress, que vous voulez convertir en menu déroulant avec Max Mega Menu ;
• Soit vous allez créer un nouveau menu.

Dans tous les cas, cela se passe via la rubrique "Emplacement de menu" du plugin. Si vous avez des menus existants, vous allez les voir affichés ici. Dans le cas contraire, vous pourrez en créer un en cliquant sur "Ajouter un autre emplacement de menu".

Si vous n'avez jamais créé de menu sur WordPress avant d'installer ce plugin, je vous renvoie à mon article sur les menus WordPress.

La structure du menu déroulant

Le but est de concevoir votre menu, avec ses éléments "parents" (le premier niveau du menu) et ses éléments "enfants" (un ou plusieurs niveaux de sous-menus). Ici par exemple, je vais tester le plugin avec un menu typique d'un site de voyage, comportant un élément parent "Voyager à l'étranger", une subdivision par région du monde (Europe de l'Ouest/Europe Centrale, etc) puis une liste de pays. On a donc deux niveaux de sous-menus, en plus de l'élément de premier niveau (le "parent").

A ce stade, votre menu est entièrement géré par votre thème WordPress, son design va donc dépendre de la façon dont votre thème affiche les menus. Dans mon cas, avec le premier niveau de sous-menus, tout se passe bien, l'affichage est correct :

Ca se gâte quand on descend d'un niveau, le contenu du sous-menu est "mélangé" à celui du niveau précédent, ce qui n'est pas très lisible.

Max Mega Menu peut entrer en action pour corriger ceci et faire en sorte que l'on puisse créer un menu déroulant plus fonctionnel.

Activer Max Mega Menu

A partir de la rubrique "Emplacement de menu", nous allons faire en sorte que Max Mega Menu prenne la place du menu par défaut du thème WordPress.

Cliquez d'abord sur le menu qui vous intéresse parmi vos menus existants.

Vous accédez à un premier écran de "paramètres généraux". Cochez la case "Activé" pour activer le méga menu sur le menu de votre choix. Vous pouvez ensuite définir quelques options :

• L'événement qui déclenche l'affichage des sous-menus (soit ils s'ouvrent au survol de la zone, soit ils s'ouvrent en cliquant dessus).
• Les effets des sous-menus - Par défaut, il y a un petit flou rapide à l'ouverture mais vous pouvez opter pour un effet moins rapide (donc plus visible) et différent, comme un fondu ou un glissement. Vous pouvez aussi choisir des effets sur mobile, car le menu déroulant est prévu pour être responsive et s'adapter à différentes tailles d'écran.
• Le thème du menu - Il existe un thème par défaut "neutre", je vous conseille de le tester pour voir le rendu sur votre site car s'il vous convient, vous n'aurez même pas besoin de toucher au design. Sinon, il faudra l'adapter à vos besoins, nous en parlerons ensuite.

Vous pouvez ensuite cliquer sur "Advanced" pour obtenir plus d'options. Dans les options avancées, vous pouvez par exemple définir :

• Le comportement de l'événement "Clic" - Si vous avez choisi d'ouvrir les menus au clic et non au survol, vous pouvez choisir ce qui se passe lors du clic (par exemple, un premier clic ouvre le sous-menu, le second ouvre le lien).
• Le comportement des sous-menus - Soit ils se ferment automatiquement, soit l'utilisateur doit effectuer une action pour les fermer. Sur mobile, vous pouvez aussi choisir si les sous-menus sont dépliés par défaut ("Expand All") ou cachés au premier abord ("Collapse all").
• L'affichage des descriptions - Par défaut, le menu affiche à la fois les intitulés et les descriptions de chaque rubrique, ce qui peut vite avoir l'air très chargé ! Si vous ne souhaitez pas que la description s'affiche, décochez la case "Menu Item Descriptions - Enable output of menu item descriptions".
• La gestion du code - Si vous maîtrisez le sujet, vous pouvez choisir de désactiver le code JavaScript associé au menu pour éviter les conflits avec Max Mega Menu, choisir le type de balise qui encadre le menu, personnaliser les classes CSS du menu. De quoi offrir de la flexibilité aux utilisateurs plus avancés. Les débutants n'ont pas besoin de toucher à ces options.

Enfin, vous avez une partie "Display options". Dans la plupart des cas, vous n'en aurez pas besoin. Elle permet de récupérer le code pour afficher le menu (code php à insérer dans un thème, shortcode à insérer dans un article ou une page ou encore possibilité d'afficher le menu dans un widget).

Par défaut, le plugin de menu déroulant Max Mega Menu vient se greffer sur votre menu existant, il n'est donc pas nécessaire de toucher aux fichiers du thème WordPress (c'est tout l'intérêt de l'extension, d'ailleurs !). Cependant, ces options vous offrent de la flexibilité si toutefois vous en avez besoin.

A ce stade, vous pouvez enregistrer… et vous arrêter là si le design du menu déroulant vous convient ! Voici un exemple de rendu en configuration par défaut :

Si vous avez besoin d'ajuster le design (ce qui sera souvent le cas pour qu'il soit à votre goût et suive votre identité visuelle), nous allons nous orienter vers la partie "Thèmes de menu" du plugin.

Personnaliser le design du menu déroulant

Voyons à présent les options de personnalisation du menu déroulant disponibles.

Paramètres généraux de design

Ici, vous pouvez nommer votre design de menu déroulant afin de le réutiliser facilement.

Vous pouvez ensuite choisir le style de curseur qui signale la présence de sous-menus (flèches, signes +, etc), régler la hauteur de ligne pour éviter que les éléments ne soient trop collés les uns aux autres.

La valeur "z-index" élevée permet de s'assurer que le menu s'affiche bien au-dessus des autres éléments de votre site (si la valeur est trop basse, il peut arriver que le sous-menu soit masqué par d'autres éléments quand il s'ouvre).

Vous pouvez également appliquer une ombre au menu et gérer certaines transitions. Ce ne sont pas les réglages qui vont impacter le plus le design de votre menu.

Design de la barre de menu

Ici, vos réglages vont beaucoup plus modifier le design de votre barre de menu ! Vous allez d'abord régler quelques paramètres généraux :

• La hauteur du menu ;
• Sa couleur de fond (soit unie, soit avec un dégradé) ;
• Son padding (l'espace autour de la zone du menu) ;
• Son radius (fait que les angles de la barre de menus soient plus ou moins arrondis).

Ensuite, vous passez aux réglages relatifs aux éléments parents du menu, les éléments de premier niveau que l'on voit sans déplier le menu. Quand vous décidez de créer un menu déroulant, c'est la première chose que l'internaute va voir.

Là aussi, les intitulés sont assez explicites. Vous pouvez choisir l'alignement des éléments de menu (centré, aligné à gauche ou à droite). Le réglage s'appliquera à tous les éléments.

Vous pouvez définir leur police d'écriture dans toutes ses dimensions (couleur, taille, majuscules/minuscules, graisse, etc), définir une couleur de fond des éléments de menu et indiquer ce qui se passe au survol (vous pouvez par exemple décider que la couleur change au survol de la souris).

N'hésitez pas à choisir un réglage extrême (ex : une couleur vert fluo) pour bien repérer à quel endroit du menu vos modifications vont s'appliquer.

Vous pouvez aussi choisir l'écart entre les éléments de menu, leur bordure, s'il y a un effet particulier sur l'élément de menu actif.

Design des sous-menus

Dans l'onglet "Mega Menus" et l'onglet suivant "Menus volants", vous pouvez définir sur le même principe le design de tous vos sous-menus. Le plugin permet en effet de créer un menu déroulant sous 2 formes :

• Un mega menu, où le fait de cliquer sur un élément parent déplie un "panneau" dans lequel vous pouvez mettre plein d'éléments (liens mais aussi widgets. Voici un exemple de sous-menu intégrant des widgets (calendrier, formulaire de contact, plan) :
  

  

• Un menu volant, qui est le menu déroulant "basique", composé de simples liens.

On retrouve les réglages classiques déjà évoqués sur les éléments parents du menu (couleur du fond, largeur, padding, bordure, radius, police d'écriture, etc).

Si vous effectuez un changement et que vous ne voyez pas le résultat sur votre menu, c'est probablement que vous n'avez pas agi sur la bonne ligne parmi tous les réglages proposés. Vérifiez que vous êtes dans le bon onglet (méga menu ou menu volant).

Design du menu mobile

Le plugin de menu déroulant Max Mega Menu propose un menu déroulant responsive, qui va automatiquement s'adapter en version mobile pour rester parfaitement fonctionnel. Dans l'onglet "Menu mobile", vous pouvez définir les critères d'affichage de ce menu mobile.

Par défaut, la bascule entre menu classique et menu responsive s'effectue à 768 pixels (tous les écrans plus petits verront le menu mobile), c'est un réglage très standard que je vous conseille de ne pas modifier. Ca correspond grosso modo à un iPad tenu à la verticale.

Voici le design par défaut du menu déroulant mobile :

Vous retrouvez là aussi le même type d'options pour paramétrer les couleurs de fond, les polices, les paddings, etc.

Définir un style personnalisé

Si vous maîtrisez le code, vous pouvez utiliser l'onglet "Style personnalisé" pour écrire votre propre code CSS afin de pousser plus loin la mise en forme du menu.

A titre d'exemple, en version gratuite seules des polices d'écriture très basiques sont proposées par le plugin… mais via l'éditeur de code, je peux tout à fait forcer Max Mega Menu à utiliser les polices de mon thème.

De même, par défaut, le style des sous-menus d'un menu volant est appliqué à l'identique pour tous les niveaux de sous-menus, comme ici (les sous-menus comme "Europe de l'Ouest" ont le même design que les sous-sous-menus comme "Londres et Royaume-Uni"). Pour ma part, je souhaitais que le sous-sous-menu soit en minuscules et pas en majuscules.

A l'aide d'un peu de code personnalisé, on peut modifier ce genre de détail.

A ce stade, vous devriez avoir un menu déroulant parfaitement fonctionnel. Cependant, il existe encore des réglages intéressants si vous voulez aller plus loin dans la personnalisation de votre menu.

Comment ajouter des icônes ou des widgets au menu déroulant ?

Le plugin Max Mega Menu offre des options complémentaires directement depuis la rubrique Apparence > Menus de WordPress. En survolant n'importe quel élément de menu, vous faites apparaître un bouton bleu permettant de configurer davantage votre menu déroulant.

Vous pouvez notamment :

• Choisir entre un sous-menu volant et un sous-menu type "méga menu" avec widgets, pour chaque élément de menu.
• Paramétrer dans le détail l'élément de menu (cacher le texte, cacher la flèche, rendre le lien non cliquable, rendre l'élément invisible sur mobile ou desktop si vous voulez un menu mobile plus simple par exemple, changer l'alignement de l'élément de menu, définir la position de l'icône associée au menu, cacher totalement un sous-menu sur mobile) ;
• Afficher une icône pour l'élément de menu, soit seule, soit en complément d'un texte.

Par exemple, pour remplacer le lien de menu "Accueil" par une icône de maison, je coche la case "Cacher le texte" pour que le texte "Accueil" de mon menu ne s'affiche plus... puis je choisis l'icône "Maison".

Si vous souhaitez ajouter un widget dans un élément de menu, il faut simplement afficher les options de Max Mega Menu sur l'élément de menu concerné, puis choisir un sous-menu de type "Mega Menu". Vous pouvez ensuite ajouter les widgets de votre choix en les important depuis la partie Apparence > Widgets de WordPress.

Comme vous pouvez le constater sur la capture d'écran, il est possible de régler le nombre de colonnes sur lequel s'affichent les widgets.

On peut tout à fait utiliser cette opportunité pour afficher un petit formulaire de contact directement dans le menu.

Plus d'options ? Max Mega Menu Pro

La version payante offre notamment :

• Des types de menus supplémentaires (menu accordéon, menu vertical, menus sous forme d'onglets) ;
• La possibilité de personnaliser davantage les icônes et les polices d'écriture ;
• Des options supplémentaires, comme le fait d'ajouter un champ de recherche dans la barre de menus ou de définir des permissions pour que certains menus ne soient visibles que par certains utilisateurs.

Les tarifs sont assez abordables, vous pouvez les consulter sur cette page.

Créer un menu déroulant sur WordPress à l'aide de ce type de plugin est en tout cas très simple et peut vous aider à améliorer de manière significative l'ergonomie de votre menu existant. J'espère que cela vous rendra service !