coastdigitalgroup/coastai-skills

Système de Navigation Mega Menu

Objectif

Le système de navigation Mega Menu fournit un cadre visuel, structurel et d'interaction systématique pour les panneaux déroulants 2D à haute densité et multi-colonnes. Lorsque les sites Web dépassent les simples listes de navigation linéaires 1D, un mega menu expose des niveaux structurés de contenu, des hiérarchies de produits catégorisées, des présentations de fonctionnalités, des appels à l'action et des cartes promotionnelles dans une seule vue extensible.

Fonctionnant comme une passerelle architecturale critique pour les plates-formes d'entreprise, les magasins de commerce électronique à grande échelle et les hubs de contenu, un mega menu résout les principaux points de friction de navigation : liens profonds cachés, abandons de survol erratiques (le « piège du mouvement diagonal de la souris »), traversée clavier inaccessible, mises en page multi-colonnes chaotiques et mauvaise adaptation responsive sur les écrans tactiles.

Cas d'utilisation

• SaaS d'entreprise et plates-formes B2B : Organisation d'écosystèmes de produits complexes (par exemple, Produits, Solutions par secteur, Fonctionnalités de la plateforme, Ressources, Témoignages clients) en colonnes thématiques distinctes avec des cartes promotionnelles.
• Catalogues e-commerce à grande échelle : Affichage de taxonomies de produits à plusieurs niveaux (par exemple, Catégorie -> Sous-catégorie -> Collections en vedette et meilleures marques) avec des vignettes visuelles riches et des mises en évidence par badge.
• Portails universitaires et de connaissances : Regroupement des départements administratifs, des facultés académiques, des portails étudiants et des répertoires de recherche dans des panneaux catégorisés à haute densité.
• Hubs éditeurs et médias : Navigation à travers plusieurs secteurs éditoriaux, séries vidéo en vedette, tendances et déclencheurs d'abonnement à la newsletter.

Quand ne PAS l'utiliser

• Sites de petite à moyenne taille (< 10 pages total) : Pour les architectures d'information plates ou peu profondes, utilisez site-navigation-system ou breadcrumb-wayfinding-system.
• Navigation d'outils intégrés à l'application : Pour les barres d'outils d'applications SaaS dynamiques ou les outils d'espace de travail, utilisez sidebar-navigation-system ou command-palette-system.
• Workflows séquentiels en plusieurs étapes : Pour la progression de tâches linéaires (par exemple, processus de paiement en plusieurs étapes ou assistant d'intégration), utilisez step-progress-system ou onboarding-tour-system.
• Navigation linéaire dans la page : Pour accéder à des sections d'un article ou d'un document actif, utilisez table-of-contents-system.

Entrées

1. Architecture de l'information (IA) : Structure arborescente catégorisée (Déclencheur parent -> Regroupements de colonnes -> Liens enfants -> Description/métadonnées de badge).
2. Jetons de conception : Échelle typographique globale, jetons d'espacement (gap, padding), remplissages d'arrière-plan, rayons de bordure, élévations d'ombre et palette de couleurs d'accentuation.
3. Contenu des actifs promotionnels : Proportions d'image, titres, sous-texte et libellés des boutons CTA pour les cartes en vedette dans le panneau.
4. Spécifications d'interaction : Seuils de temporisation de l'intention de survol (délai d'ouverture, délai de fermeture, géométrie du tampon de trajectoire du curseur) et stratégie de gestion du focus.
5. Limites des points de rupture : Seuils de fenêtre d'affichage définissant la transition des panneaux 2D de bureau vers les tiroirs d'exploration multi-niveaux ou les accordéons mobiles.

Sorties

1. Géométrie du panneau Mega Menu et grille spatiale : Spécification de mise en page en 2 colonnes (par exemple, matrice de liens à 3 colonnes + 1 carte promotionnelle en vedette) avec des limites strictes de remplissage et de gouttière.
2. Système d'interaction déclencheur-panneau : Spécifications du tampon d'intention de survol, routage de la gestion du focus, mappage du contrôle clavier et comportement d'échappement.
3. Architecture de balisage accessible : Modèle structurel HTML avec sémantique ARIA complète (aria-expanded, aria-controls, aria-haspopup, role="navigation").
4. Stratégie d'adaptation mobile réactive : Spécification de conversion pour traduire les méga-panneaux de bureau en panneaux d'exploration optimisés pour le tactile ou en accordéons imbriqués.

---

Flux de travail

1. Structurer la grille spatiale (composition en 2 colonnes)

Un panneau de méga menu doit équilibrer la densité d'information avec une grande capacité de balayage visuel. Concevez le panneau déroulant comme un conteneur de grille structuré aligné directement sur la barre de navigation principale ou sur la largeur totale de la fenêtre d'affichage :

• Géométrie du conteneur : Positionnez le panneau de manière absolue par rapport à l'en-tête de navigation principal ou au conteneur d'en-tête (top: 100%). Utilisez une largeur complète (width: 100% dans les limites maximales du conteneur, par exemple 1200px ou superposition en plein écran) avec un remplissage interne généreux (par exemple, padding: 24px 32px ou var(--space-l)).
• Modes d'allocation des colonnes :
  • Mise en page standard à 4 colonnes (3 liens + 1 promotion) : 3 colonnes dédiées aux regroupements de liens (chacune de 22 à 25 % de largeur) + 1 colonne réservée à une carte promotionnelle en vedette ou à un bloc CTA rapide (25 à 30 % de largeur).
  • Matrice à 3 colonnes catégorisées : 3 colonnes égales pour les listes de catégories à haute densité avec en-têtes de catégorie, sous-liens et descriptions.
  • Panneau divisé maître-détail : Colonne de barre latérale gauche (20 à 25 % de largeur) contenant des onglets de catégorie verticaux, pilotant le contenu dans un panneau d'affichage droit dynamique (75 à 80 % de largeur).
• Échelle des gouttières et de l'espacement : Maintenez un écart fluide strict entre les colonnes (gap: 24px à 32px) pour garantir une séparation visuelle distincte sans fragmentation.

2. Concevoir l'anatomie du contenu dans les colonnes

Chaque colonne représente un regroupement sémantique distinct. Organisez les éléments par hiérarchie :

• En-tête de colonne / Titre de section : Utilisez une distinction visuelle claire pour les en-têtes de groupe (par exemple, majuscules/gras, font-size: 0.875rem, letter-spacing: 0.05em, couleur de marque atténuée).
• Anatomie d'une ligne d'élément de lien :
  • Titre : Étiquette principale, texte à contraste élevé (4,5:1 minimum).
  • Icône / Badge (facultatif) : Icône de tête de 20x20 px ou badge en ligne de fin (par exemple, « Nouveau », « Bêta », « Populaire »).
  • Description (facultatif) : Texte d'accompagnement atténué (1 à 2 lignes, font-size: 0.8125rem, couleur avec un contraste de 4,5:1) expliquant la destination.
• Anatomie de la carte promotionnelle en vedette :
  • Mise en évidence des cibles de conversion à forte valeur ajoutée (par exemple, nouvelle version de fonctionnalité, livre blanc, demande de démo).
  • Structuré avec une vignette visuelle (aspect-ratio: 16/9), un titre en gras, un texte concis et un bouton/lien CTA stylisé. L'arrière-plan de la carte doit utiliser une teinte subtile ou un contraste de surface (background: var(--surface-subtle)).

3. Implémenter l'intention de survol et la protection contre le déplacement du curseur

Le « piège du mouvement diagonal de la souris » se produit lorsqu'un utilisateur déplace sa souris en diagonale d'un déclencheur de menu vers un lien dans le méga-panneau, passant accidentellement sur des déclencheurs adjacents et fermant prématurément le menu.

• Tampons d'intention de survol :
  • Seuils de délai : Appliquez un délai de survol minimum (150ms–200ms) avant d'ouvrir un menu, empêchant le scintillement lorsque les curseurs balayent rapidement la barre de navigation.
  • Période de grâce de sortie : Maintenez l'état ouvert du panneau pendant 200ms–300ms après que le curseur a quitté la limite du déclencheur/panneau.
• Géométrie de survol sécurisée (triangle de visée) :
  • Implémentez un polygone tampon directionnel dynamique (triangle de visée) partant de la position du déclencheur actif vers les coins supérieur et inférieur du panneau de méga menu ouvert.
  • Tant que le pointeur de la souris se déplace dans cette limite triangulaire, ignorez les transitions d'état de survol sur les déclencheurs de navigation frères.

4. Créer une navigation clavier accessible et une logique ARIA

Un méga menu doit être 100 % utilisable au clavier et parfaitement compréhensible par les technologies d'assistance :

• SÉMANTIQUE du déclencheur :
  • Utilisez des éléments HTML <button> pour les déclencheurs qui ouvrent des panneaux, PAS de simples balises <a> ou <div>.
  • Définissez aria-expanded="true|false" dynamiquement en fonction de l'état du panneau.
  • Définissez aria-controls="mega-panel-[id]" pointant vers l'ID du conteneur du panneau correspondant.
  • Définissez aria-haspopup="true" (ou aria-haspopup="dialog" / aria-haspopup="menu" selon les rôles internes).
• Modèles de traversée du clavier :
  • Tab : Concentre le déclencheur suivant dans la barre d'en-tête lorsque le menu est fermé. Lorsque le menu est ouvert, déplace le focus dans le panneau de méga menu ouvert séquentiellement à travers les liens.
  • Escape : Ferme instantanément tout panneau de méga menu ouvert et renvoie le focus au bouton déclencheur parent.
  • Flèches (Gauche/Droite) : Navigue entre les déclencheurs d'en-tête principal de premier niveau.
  • Flèches (Bas/Haut) : Navigue de haut en bas à travers les liens dans la colonne du panneau méga ouvert.

5. Définir la stratégie d'adaptation mobile réactive

Les méga-panneaux multi-colonnes de bureau ne peuvent pas tenir horizontalement sur les écrans mobiles (< 768px/1024px).

• Motif de tiroir d'exploration mobile (recommandé) :
  • Transformez l'en-tête de bureau en un tiroir coulissant mobile (100vw ou 320px–400px coulissement latéral fixe).
  • Utilisez une pile de panneaux coulissants à plusieurs niveaux : appuyer sur un déclencheur principal fait glisser le tiroir au niveau 2 (liens de catégorie) avec un bouton « ← Retour » proéminent en haut.
• Alternative d'empilement d'accordéon :
  • Les déclencheurs principaux se replient verticalement en en-têtes d'accordéon. Appuyer sur un déclencheur développe les liens de colonne en ligne en dessous.
  • Assurez-vous que les cibles tactiles mesurent au moins 44x44px pour tous les déclencheurs de catégorie et liens mobiles.

---

Règles de décision

Sélection des motifs de mise en page du méga menu

Type d'architecture	Motif de mise en page recommandé	Critères de décision
SaaS d'entreprise (Produits, Solutions, Ressources)	3 colonnes de liens + 1 carte en vedette	Besoin élevé de présenter les principaux actifs de conversion (par exemple, études de cas, démos) à côté des listes de produits.
E-commerce profond (100+ catégories)	Panneau divisé maître-détail (onglets de catégorie)	Nécessite de parcourir des dizaines de sous-catégories sans surcharger la hauteur de la fenêtre d'affichage verticale.
Hub de contenu / Éditeur	Matrice à 3 colonnes catégorisées + bannière inférieure	Se concentre sur les catégories d'articles multi-verticales avec des badges de tendances et une barre de newsletter.
Plateforme utilitaire (outils de développement, documentation d'API)	Liens texte à 4 colonnes haute densité avec badges	Privilégie l'accès direct aux liens et la rapidité plutôt que les supports visuels promotionnels.

Mécanismes de déclenchement : survol ou clic

Comportement du déclencheur	Application du cas d'utilisation	Justification de la conception et de l'accessibilité
Survol avec tampon intentionnel + prise en charge du clic	Portails Web de bureau, SaaS d'entreprise	Fournit un balayage rapide et sans friction pour les utilisateurs de souris tout en conservant la fonctionnalité de clic/appui pour les appareils hybrides.
Clic strict pour ouvrir uniquement	Tableaux de bord complexes, applications Web à haute densité	Élimine l'ouverture accidentelle lors des mouvements rapides du curseur ; idéal pour les applications où la précision de la fenêtre d'affichage est critique.
Appui tactile à bascule	Fenêtres d'affichage mobiles et tablettes	Les événements de survol de la souris n'existent pas sur les écrans tactiles ; l'appui doit explicitement basculer l'état ouvert ou effectuer une exploration.

---

Contraintes

• Accessibilité (WCAG 2.2 AA minimum) :
  • SC 2.4.7 Focus visible : Anneaux de focus visibles, non coupés et à contraste élevé (2px solide avec décalage) autour de tous les déclencheurs, sous-liens et boutons CTA promotionnels.
  • SC 2.4.11 Focus non obscurci : Les panneaux de méga menu ne doivent jamais obscurcir l'indicateur de focus actif du bouton déclencheur lors de la navigation arrière.
  • SC 2.5.8 Taille des cibles : Toutes les cibles tactiles dans les tiroirs mobiles et les liens de bureau doivent avoir une taille minimale de 24x24px (bureau) et 44x44px (mobile).
  • SC 1.4.3 Contraste : Les titres des liens doivent maintenir un contraste d'au moins 4,5:1 par rapport aux arrière-plans du panneau ; le texte descriptif secondaire doit également respecter 4,5:1.
• Confinement aux limites de la fenêtre d'affichage : Les panneaux de méga menu ne doivent jamais créer de défilement horizontal sur la page (overflow-x: hidden sur les limites de la fenêtre d'affichage) ni dépasser les limites des bords.
• Empilement dynamique de l'index Z : Les méga menus doivent utiliser une échelle de couche d'index Z claire (par exemple, z-index: 1000) au-dessus des éléments héros, des en-têtes collants et du contenu de la page, mais en dessous des boîtes de dialogue modales et des notifications.

---

Modèles d'échec courants

• Le piège de la souris (pas d'intention de survol) : Fermeture du méga panneau dès que le curseur quitte une ligne droite stricte, frustrant les utilisateurs qui tentent de se déplacer en diagonale vers les liens.
• Le trou noir du clavier : Ouverture visuelle d'un méga panneau au survol, mais sans permettre au focus Tab du clavier d'entrer dans le panneau, rendant les liens profonds inaccessibles aux utilisateurs de lecteurs d'écran et de clavier.
• Le déclencheur d'ancrage non sémantique : Utilisation de <a href="/products"> comme bascule de méga menu sans attributs ARIA, ce qui fait que les lecteurs d'écran l'annoncent comme un simple lien plutôt que comme un bouton de menu extensible.
• Le débordement de la fenêtre d'affichage : Codage en dur de largeurs de pixels fixes (par exemple 1200px) sur le méga panneau sur des écrans de bureau moyens (par exemple, 1024px), provoquant des barres de défilement horizontales.
• Le rétrécissement du panneau de bureau sur mobile : Rétrécissement des méga panneaux de bureau à 4 colonnes sur les écrans mobiles, forçant un texte illisible et des cibles tactiles microscopiques.

---

Critères de validation

• Grille spatiale 2D structurée : Le panneau de méga menu utilise une mise en page multi-colonnes claire avec un remplissage explicite, des espaces entre les colonnes et un conteneur de carte promotionnelle facultatif.
• Déclencheurs de boutons accessibles : Les déclencheurs de premier niveau utilisent des éléments <button> avec les attributs aria-expanded, aria-controls et aria-haspopup.
• Navigation au clavier : Prise en charge complète du clavier permettant la traversée séquentielle Tab dans le panneau, la fermeture par la touche Escape et le retour du focus aux déclencheurs parents.
• Intention de survol et tampon de sécurité : Délai de survol implémenté (150ms–200ms) et période de grâce de sortie (200ms–300ms) ou tampon de géométrie de curseur sécurisé.
• Empilement/exploration mobile : Conversion propre en un tiroir optimisé pour mobile avec des panneaux d'exploration ou des accordéons verticaux sur les écrans < 768px.
• Conformité au contraste AA : Tout le texte (titres de liens, en-têtes de catégorie, descriptions d'accompagnement) respecte un contraste d'au moins 4,5:1 par rapport à l'arrière-plan du panneau.
• Anneaux de focus non obscurcis : Chaque lien et bouton focalisable dans le méga menu possède un indicateur de focus actif, visible et à contraste élevé.