Méga-menu
Transformez n’importe quel élément de menu de premier niveau en un panneau pleine largeur jusqu’à 4 colonnes — combinez liens, titres, images, shortcodes et bien plus, sans écrire une seule ligne de code.
Qu’est-ce qu’un méga-menu ?
Un menu déroulant WordPress classique affiche une simple liste verticale de sous-éléments. Un méga-menu, lui, ouvre un large panneau pouvant contenir plusieurs colonnes, des titres de section, des icônes et des images. On le retrouve fréquemment sur les grands sites e-commerce et les portails riches en contenu.
Activer le méga-menu sur un élément de premier niveau
- Ouvrez Menu Builder → ⚡ Mega Menu dans la barre latérale d’administration.
- La liste des éléments affiche un badge d’état ON/OFF pour chaque élément de navigation de premier niveau.
- Cliquez sur ＋ Activer le méga-menu sur l’élément que vous souhaitez convertir.
- Cliquez sur ⚡ Modifier les colonnes ▶ pour ouvrir la fenêtre de l’éditeur de colonnes.
- Ajoutez des colonnes, remplissez-les de blocs de contenu, puis fermez la fenêtre et enregistrez.
Les méga-menus ne peuvent s’appliquer qu’aux éléments de premier niveau. Les sous-éléments sont disposés à l’intérieur des colonnes, et non sous forme de menus déroulants imbriqués. Chaque élément accepte au maximum 4 colonnes.
Ajouter et organiser les colonnes
Dans la fenêtre de l’éditeur de colonnes, vous pouvez :
- Ajouter une colonne — cliquez sur + Ajouter une colonne. Les colonnes se disposent horizontalement dans le panneau.
- Dupliquer une colonne — cliquez sur l’icône de duplication dans l’en-tête d’une colonne pour la cloner (avec tous ses éléments) et l’insérer juste après l’originale. L’option est désactivée une fois la limite de 4 colonnes atteinte.
- Réorganiser les colonnes — faites glisser la poignée de la colonne vers la gauche ou la droite.
- Définir la largeur d’une colonne — saisissez un pourcentage. Laissez vide pour une répartition égale entre toutes les colonnes.
- Définir l’alignement — choisissez Gauche, Centre ou Droite pour tous les éléments de la colonne.
- Supprimer une colonne — cliquez sur l’icône de corbeille dans l’en-tête de la colonne.
Types de contenu des colonnes
Chaque colonne contient un ou plusieurs blocs de contenu. Cliquez sur + Ajouter un élément dans une colonne pour choisir un type :
| Type | Description | Champs principaux |
|---|---|---|
| Lien | Un lien cliquable avec, en option, une icône et une ligne de description. | Libellé, URL, Classe d’icône, Description, Ouvrir dans un nouvel onglet |
| Titre | Un libellé de section non cliquable qui regroupe visuellement les liens. | Libellé, Classe d’icône |
| Séparateur | Un fin trait horizontal pour séparer les groupes d’éléments. | — |
| Image | Un bloc image pleine largeur, éventuellement encapsulé dans un lien. Choisissez une image dans la médiathèque WP ou collez une URL externe. | Image, URL du lien, Largeur, Hauteur, Ouvrir dans un nouvel onglet |
| Shortcode | Affiche n’importe quel shortcode dans la colonne — pratique pour les formulaires de contact, les newsletters, les grilles de produits ou les widgets personnalisés. | Chaîne du shortcode |
Apparence par élément
Chaque panneau de méga-menu dispose de son propre onglet 🎨 Apparence, indépendant, dans la fenêtre de l’éditeur. Les modifications ne s’appliquent qu’au panneau de cet élément et remplacent les valeurs globales par défaut. Cliquez sur ↺ Rétablir les valeurs globales pour effacer toutes les personnalisations de cet élément.
| Réglage | Description |
|---|---|
| Arrière-plan | Couleur unie, l’un des 12 préréglages de dégradé, ou un dégradé personnalisé créé avec le sélecteur visuel (boussole de direction + deux sélecteurs de couleur). |
| Largeur maximale du panneau (px) | Limite la largeur de ce panneau (400–2400 px) et le centre. Laissez vide pour un affichage pleine largeur. |
| Marge intérieure haut/bas et gauche/droite | Espacement interne du panneau. |
| Espacement entre colonnes | Espace entre les colonnes. |
| Rayon des angles | Arrondi appliqué aux deux coins inférieurs du panneau. |
| Taille de police | Taille de police de base pour tout le contenu du panneau. |
| Couleur des liens / titres / accent / survol / description / séparateur | Contrôle complet des couleurs propre à chaque panneau, indépendamment de la section Couleurs principale. |
| Style de séparateur | Plein, en tirets ou en pointillés. |
| Vitesse d’animation d’ouverture/fermeture | Durée de la transition du panneau (0–800 ms). Réglez sur 0 pour un affichage instantané. |
Préréglages
L’onglet ✨ Préréglages, dans le panneau Apparence, vous permet de charger une disposition de colonnes complète en un clic. 20 modèles sectoriels sont prêts à l’emploi :
SaaS, E-commerce, Agence, Restaurant, Voyage, Santé, Immobilier, Cabinet d’avocats, Finance, Mode, Hôtellerie, Associations, Événementiel, Automobile, Jeux vidéo, Fitness, Beauté et bien-être, Start-up tech, Portfolio et Éducation.
Les préréglages remplissent à la fois le contenu des colonnes et une palette de couleurs assortie — ainsi, ils offrent un rendu soigné d’emblée, quel que soit le thème de votre menu principal.
Comportement sur mobile
Sur mobile, toucher un élément de méga-menu fait glisser un panneau dédié en plein écran, avec un bouton de retour ← en haut — pour une expérience digne d’une application native. Les couleurs d’arrière-plan et les polices propres à chaque élément sont neutralisées sur mobile, afin que les liens conservent toujours le même style épuré que le reste du menu mobile.
Vous pouvez définir le comportement mobile par élément dans le panneau Méga-menu :
- Visible sur mobile — utilise la navigation par poussée (push-screen) décrite ci-dessus.
- Masqué sur mobile — le panneau méga n’est pas affiché sur les petits écrans.
Réglages globaux
Ces réglages se trouvent en haut du panneau ⚡ Mega Menu ; certains s’appliquent à l’ensemble du site, d’autres élément par élément :
| Réglage | Description |
|---|---|
| Pleine largeur | Case à cocher, par élément, qui fait occuper à ce panneau toute la largeur de la fenêtre. |
| Couleurs par défaut des liens / titres / accent | Couleurs par défaut, valables pour tout le site, du contenu des panneaux méga. Les personnalisations d’apparence par élément ont la priorité. |
Le comportement de « survol diagonal » est intégré d’office — le panneau méga attend la souris au lieu de disparaître en cours de route lorsque l’utilisateur se dirige en diagonale vers son contenu.