Créer un méga menu avec Divi, sans extension supplémentaire

Quand ton site compte beaucoup de rubriques, un menu déroulant classique devient vite une longue liste qu’on fait défiler à l’aveugle. Le méga menu règle ça : un grand panneau qui s’ouvre sous l’élément survolé, avec plusieurs colonnes titrées. Divi sait le faire nativement, avec une simple classe CSS. Si tu découvres ce thème, notre guide du thème Divi pose les bases.

Le principe : une classe sur un élément de premier niveau

Divi transforme en méga menu tout élément de premier niveau qui porte la classe CSS mega-menu. La structure suit la hiérarchie de ton menu :

Chaque élément de deuxième niveau devient donc une colonne. La documentation d’Elegant Themes indique un nombre maximal de colonnes par ligne ; au-delà, les éléments passent à la ligne suivante. Vérifie la valeur actuelle dans la documentation officielle avant de construire un menu très large.

Étape 1 : afficher le champ Classes CSS

Le champ dans lequel on saisit la classe est masqué par défaut dans WordPress.

1. Va dans Apparence > Menus.
2. En haut à droite, ouvre « Options de l’écran ».
3. Coche « Classes CSS ».

Un champ « Classes CSS (facultatif) » apparaît désormais dans chaque élément de menu déplié.

Étape 2 : construire la hiérarchie

Prends l’exemple d’un site de formation avec une entrée « Formations » :

• Formations (premier niveau)
  • Bureautique (deuxième niveau)
    • Tableur débutant
    • Traitement de texte
  • Web (deuxième niveau)
    • WordPress
    • Référencement
  • Langues (deuxième niveau)
    • Anglais
    • Espagnol

Pour décaler un élément d’un niveau, fais-le glisser légèrement vers la droite sous son parent. Les titres de colonnes peuvent être de vrais liens vers des pages de catégorie : c’est plus utile qu’un lien personnalisé vide avec un #.

Étape 3 : ajouter la classe

Déplie l’élément « Formations », écris mega-menu dans le champ « Classes CSS (facultatif) », puis clique sur « Enregistrer le menu ».

Vérifie dans Emplacements de menu que ce menu est bien attribué au menu principal de Divi. Recharge le site et survole « Formations » : le panneau doit s’ouvrir sur toute la largeur, en colonnes.

Ajuster l’apparence

Les couleurs du panneau reprennent celles des sous-menus, réglées dans Divi > Personnalisateur de thème, rubrique de l’en-tête et de la navigation. Pour affiner, ajoute du CSS dans les options du thème ou dans un thème enfant :

#top-menu li.mega-menu > ul > li > a {
    font-weight: 600;
    text-transform: uppercase;
}

Garde des intitulés courts : un méga menu chargé de longues phrases devient illisible.

Et avec le Theme Builder ?

La méthode ci-dessus concerne l’en-tête par défaut de Divi. Le Theme Builder permet aussi de créer un en-tête personnalisé avec des modules, dont un module Menu. Le comportement de la classe mega-menu peut alors différer selon la version de Divi et le module utilisé : teste-la sur une copie de ton site. Pour un panneau très riche, avec images ou boutons, certains préfèrent construire un en-tête sur mesure dans le Theme Builder ou passer par une extension dédiée. Notre comparatif Divi, Elementor ou éditeur de blocs aide à juger si ce niveau de personnalisation vaut l’effort.

Accessibilité : un méga menu doit rester utilisable sans souris

Un panneau qui ne s’ouvre qu’au survol pose problème aux personnes qui naviguent au clavier ou avec un lecteur d’écran. Fais ces vérifications :

• au clavier : avec la touche Tab, peux-tu atteindre tous les liens du panneau, et voir où se trouve le focus ?
• le contraste : les liens et titres de colonnes restent-ils lisibles sur la couleur de fond ?
• la structure : un lecteur d’écran annonce-t-il les sous-menus de façon compréhensible ?
• la fermeture : le panneau se referme-t-il quand le focus le quitte, ou avec la touche Échap ?

Si un de ces points coince, ajoute un lien vers une page récapitulative de la rubrique, accessible à tous. Notre article sur l’accessibilité RGAA d’un site WordPress détaille la méthode de test.

Sur mobile

Sur téléphone, Divi n’affiche pas le méga menu en colonnes : il bascule vers le menu mobile, où tous les niveaux s’empilent. Avec trois niveaux et de nombreux liens, la liste peut devenir très longue. Quelques pistes :

• limite le nombre de liens de troisième niveau à l’essentiel ;
• fais pointer chaque titre de colonne vers une page qui liste le détail ;
• teste réellement sur un téléphone, pas seulement en réduisant la fenêtre du navigateur.

En résumé

Un bon méga menu se juge à la vitesse à laquelle un visiteur trouve la bonne page. Si tes colonnes ne parlent pas d’elles-mêmes, retravaille l’organisation de tes rubriques avant le menu.

Cet article peut contenir des liens partenaires. Ils n'influencent jamais ce que nous écrivons.