Méga menu avec aperçu
Un menu déroulant avec les rubriques à gauche et une carte qui change selon l'option pointée.
Réglages
Code
<nav class="uv-nmg" aria-label="Principal"><ul class="tb"><li class="dd"><button type="button" aria-expanded="false" aria-controls="uv-nmg-p">Produits<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><div class="pn" id="uv-nmg-p"><ul class="ls"><li style="--c:#6366f1"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg><span><b>Analytique</b><small>Tableaux de bord en temps réel</small></span></a></li><li style="--c:#f59e0b"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span><b>Automatisation</b><small>Flux sans code</small></span></a></li><li style="--c:#10b981"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z"/></svg><span><b>Sécurité</b><small>Accès et audit</small></span></a></li><li style="--c:#ec4899"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><path d="M17 13.5v7M13.5 17h7"/></svg><span><b>Intégrations</b><small>Plus de 200 applis</small></span></a></li></ul><div class="pv"><div class="cd" style="--c:#6366f1"><i></i><b>Analytique</b><span>Tableaux de bord en temps réel. Essai gratuit de 14 jours.</span></div><div class="cd" style="--c:#f59e0b"><i></i><b>Automatisation</b><span>Flux sans code. Essai gratuit de 14 jours.</span></div><div class="cd" style="--c:#10b981"><i></i><b>Sécurité</b><span>Accès et audit. Essai gratuit de 14 jours.</span></div><div class="cd" style="--c:#ec4899"><i></i><b>Intégrations</b><span>Plus de 200 applis. Essai gratuit de 14 jours.</span></div></div></div></li><li><a href="#">Tarifs</a></li><li><a href="#">Clients</a></li></ul></nav>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Les sites SaaS et les grandes boutiques utilisent des méga menus pour expliquer le contenu de chaque rubrique avant le clic. Celui-ci s'ouvre depuis une barre compacte au survol ou au focus clavier, liste quatre produits avec icône et description d'une ligne, et affiche à droite une carte colorée qui change selon l'élément survolé ou focalisé.
La logique de l'aperçu est du pur CSS avec :has, elle fonctionne même si les scripts sont lents. Quelques lignes de JavaScript synchronisent seulement aria-expanded et ferment le panneau avec Échap. Remplace les cartes par des captures ou des promotions et garde la même structure.