Mega menu nav

Ce qui est inclus

Une barre de navigation à méga-menu, dans deux fichiers : une feuille de style et un script, plus la police. Aucune dépendance, aucune étape de build, aucune requête externe — on copie le dossier dans un projet et ça marche.

Le composant ne réinvente pas le menu déroulant : chaque volet est un <details> du navigateur. C’est lui qui fournit le rôle de bouton, l’état plié ou déplié annoncé aux lecteurs d’écran, et — grâce à l’attribut name — l’exclusivité entre les menus. Le script n’ajoute que du confort : l’ouverture au survol, l’animation de fermeture, Échap, les flèches.

Fonctionnalités

• Ouverture au survol — sur un appareil à pointeur fin, deux délais réglables font le travail : l’un empêche la barre de se déplier sous une souris qui ne fait que la traverser, l’autre couvre le trajet jusqu’au panneau. Un attribut suffit à s’en passer.
• Entrée en cascade — le panneau arrive d’un bloc, son contenu suit en vague, de gauche à droite et de haut en bas. Trois variables la règlent, et elle se coupe en mettant l’écart entre deux blocs à zéro.
• Clavier complet — Tab, Entrée, Espace, Échap, flèches gauche et droite entre les menus, flèche bas pour entrer dans le panneau ouvert. C’est le motif WAI-ARIA « Disclosure Navigation Menu ».
• Marche sans JavaScript — coupez le script : les menus s’ouvrent toujours, à la souris comme au clavier, et un seul à la fois.
• Une variable pour l’échelle — toutes les mesures dérivent de la taille du texte : hauteur de barre, arrondis, marges, pastilles d’icône et chevron suivent ensemble.
• Voile et flou d’arrière-plan — la barre et le panneau sont translucides, avec un repli propre sur les navigateurs qui ne savent pas flouter.
• Deux variantes — densité de formulaire, et version pour fond clair.

Le poser dans une page

Deux fichiers à charger, puis le balisage habituel :

<link rel="stylesheet" href="mega-menu-nav.css">
<script src="mega-menu-nav.js" defer></script>

<nav class="mega-menu-nav" aria-label="Navigation principale">
  <div class="mega-menu-nav__bar">
    <ul class="mega-menu-nav__links">
      <li class="mega-menu-nav__item">
        <details class="mega-menu-nav__disclosure" name="nav">
          <summary class="mega-menu-nav__trigger">Produit</summary>
          <div class="mega-menu-nav__panel">…</div>
        </details>
      </li>
    </ul>
  </div>
</nav>

C’est tout : le script s’installe au chargement, y compris sur les barres insérées après coup. Le même name sur tous les <details> d’une barre est ce qui garde l’exclusivité même sans JavaScript.

Ce qu’il faut savoir

• Le voile prend la couleur de ce qui passe dessous. La barre est un voile blanc translucide : sur du blanc, elle ne se lit pas. C’est la nature du flou d’arrière-plan, pas un défaut — sur une page claire on bascule sur la variante --light, qui inverse la teinte sans dupliquer une seule règle.
• Le survol ne dessert personne. Un écran tactile n’est pas concerné, le panneau ne se dérobe pas quand on va vers lui, et tant que le clavier travaille dedans la souris ne le referme pas. C’est ce que demande le critère WCAG 2.1 sur le contenu au survol.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, relevées au pixel sur son visuel — l’écart maximal mesuré après superposition est de 0,91 px. Le code, lui, est original : rien n’a été repris de son implémentation.