# Méga-menu Elementor Pro : le widget Menu imbriqué pas à pas

> Construire un méga-menu accessible avec le widget Menu imbriqué d'Elementor Pro, en soignant la version mobile et la navigation au clavier.

- Auteur : Clément Hadrot
- Publié le : 2023-11-28
- Mis à jour le : 2023-11-28
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/mega-menu-elementor-pro-widget-menu-imbrique/

## L’essentiel

- Le widget Menu accepte du contenu libre dans chaque sous-menu
- Le mode mobile se configure séparément du desktop
- La navigation clavier ne fonctionne pas par défaut sans réglages

Un client dans la distribution de matériel professionnel voulait un menu capable de présenter, sous chaque catégorie principale, une sélection de sous-catégories organisées en colonnes, accompagnées d'images de mise en avant et d'un bloc promotionnel. Le menu WordPress classique ne permet pas ce niveau de mise en page. Le widget Menu d'Elementor Pro, basé sur les nested elements, répond exactement à ce besoin puisqu'il autorise du contenu Elementor libre à l'intérieur de chaque sous-menu.

Voici la construction complète telle qu'elle a été menée sur ce projet, des colonnes de desktop jusqu'à la version mobile et à l'accessibilité clavier, souvent négligée sur ce type de composant.

## Poser le widget et relier la structure du menu

Le widget Menu se pose comme n'importe quel widget Elementor, généralement dans un header construit avec Theme Builder. Il se connecte à un menu WordPress existant, créé au préalable dans **Apparence > Menus**, ce qui signifie que la structure des liens (catégories et sous-catégories) reste gérée par le menu WordPress natif, tandis qu'Elementor prend en charge uniquement la mise en forme visuelle du méga-menu.

Pour chaque élément de premier niveau du menu WordPress, Elementor génère un container enfant vide qu'il est possible de remplir librement : c'est cet emplacement qui accueille la structure en colonnes du méga-menu.

## Construire la structure en colonnes

À l'intérieur du container associé à la catégorie « Outillage électroportatif », la structure retenue a été un container Flexbox en ligne, avec quatre colonnes de sous-catégories et une cinquième colonne dédiée à un visuel promotionnel :

- Colonne 1 à 4 : un widget Titre suivi d'une liste de liens texte simples vers les sous-catégories.
- Colonne 5 : une image avec un lien vers l'offre du mois, plus étroite que les colonnes de liens.

> L'essentiel à retenir : Le widget Menu accepte du contenu libre dans chaque sous-menu ; Le mode mobile se configure séparément du desktop ; La navigation clavier ne fonctionne pas par défaut sans réglages

Limiter la largeur totale du menu déroulant à la largeur du conteneur principal du site (plutôt qu'à la pleine largeur de l'écran) a évité un effet de débordement disgracieux sur les écrans très larges, tout en gardant un menu qui reste lisible sans defiler horizontalement sur un écran de bureau classique.

## Adapter le comportement en mobile

Le widget Menu propose un réglage de point de rupture à partir duquel il bascule en menu hamburger, indépendant du reste de la mise en page du site. Sur ce projet, le méga-menu en colonnes n'avait aucun sens en dessous de 768 pixels : la configuration mobile a donc été pensée comme un menu accordéon classique, où chaque catégorie se déplie verticalement pour révéler ses sous-catégories, sans conserver la mise en colonnes ni le visuel promotionnel qui alourdirait inutilement le défilement sur mobile.

### Un point de vigilance sur la performance mobile

Par défaut, le contenu de tous les sous-menus est présent dans le DOM dès le chargement de la page, simplement masqué en CSS. Sur un menu avec de nombreuses catégories et plusieurs images promotionnelles par sous-menu, cela peut représenter un poids d'images non négligeable chargé inutilement pour un visiteur mobile qui n'ouvrira peut-être jamais le menu. Activer le lazy-loading sur les images des sous-menus, disponible dans les réglages d'image du widget, réduit sensiblement ce poids initial.

## Rendre le menu accessible au clavier

C'est le point le plus souvent négligé sur ce type de composant. Par défaut, la navigation au clavier avec la touche Tabulation permet d'atteindre les liens du menu principal, mais l'ouverture des sous-menus imbriqués n'est pas toujours annoncée correctement par les lecteurs d'écran, et la touche Échap ne referme pas systématiquement le sous-menu ouvert.

> Conseil maison : tester le méga-menu entièrement au clavier, sans souris, avant chaque mise en production, en vérifiant que chaque sous-menu s'ouvre au focus, se referme avec Échap, et que l'ordre de tabulation suit l'ordre visuel des colonnes.

Sur ce projet, un ajustement CSS ciblé sur les attributs `:focus-within` des containers de sous-menu a permis de garder le sous-menu ouvert tant qu'un lien à l'intérieur reste focalisé, corrigeant le comportement par défaut qui refermait le menu dès que le focus quittait visuellement le lien parent.

## En résumé

Le widget Menu imbriqué d'Elementor Pro couvre largement le besoin d'un méga-menu structuré sans développement sur mesure, à condition de traiter séparément trois problématiques : la structure en colonnes du desktop, une version mobile réellement pensée pour l'usage tactile, et une accessibilité clavier qui ne vient jamais gratuitement. Sur ce projet, ces trois volets ont représenté plus de la moitié du temps de construction du menu, bien après la mise en place visuelle initiale qui, elle, s'est faite en une matinée.