Dropdown Reveal
Menu déroulant pur CSS : opacity, visibility et translateY(-10px) s'animent simultanément au survol — chevron inclus, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au survol du .dropdown-container, trois propriétés CSS transitionnent simultanément sur .dropdown-menu via transition: .3s : opacity (0 → 1), visibility (hidden → visible) et transform: translateY(-10px → 0). Le sélecteur .dropdown-container:hover .dropdown-menu déclenche tout depuis le conteneur parent — aucun JavaScript n'intervient.
La combinaison opacity + visibility est essentielle : display:none bloque toute transition CSS. opacity:0 seul cache visuellement mais laisse les zones de clic actives. Avec visibility:hidden, l'élément est exclu des interactions ; la propriété accepte une transition et attend que opacity atteigne 0 avant de se cacher — l'animation de fermeture est intacte.
Le chevron SVG dans .dropdown-trigger a sa propre règle de transition (transition: transform .3s). La règle .dropdown-container:hover .dropdown-trigger svg { transform: rotate(180deg) } le fait pivoter au même instant que le panel — un seul hover parent synchronise les deux animations.
Huit variables CSS sur :root centralisent le thème : --bg-card (fond du trigger et du menu), --border (contour), --space-2/3/4 (paddings) et --radius-sm/md/lg (arrondis). Modifier une variable propage le changement à l'ensemble du composant.
Accessibilité
- prefers-reduced-motion absent — le code ne contient aucune media query
@media (prefers-reduced-motion: reduce). Les transitions se déclenchent quelle que soit la préférence système. Correctif minimal :@media (prefers-reduced-motion: reduce) { .dropdown-menu, .dropdown-trigger svg { transition: none; } }. - Trigger
<div>non focusable — le déclencheur n'est pas un<button>; sans JS supplémentaire il n'est pas atteignable au clavier (Tab, Enter, Espace). - Aucun attribut ARIA — le code ne contient ni
aria-expanded, niaria-haspopup, nirole="menu"/role="menuitem". - Survol uniquement — l'ouverture repose sur
:hoverCSS pur ; le menu ne s'ouvre ni au clavier ni sur écran tactile sans événementclickajouté en JS. - Contraste texte — blanc
#ffffffsur fond--bg-card: #12121a, ratio ≈ 19,3:1, conforme WCAG AAA.
Compatibilité navigateur
Utilise uniquement opacity, visibility, transform et transition — propriétés CSS universelles depuis IE 10. Zéro JavaScript, zéro dépendance.
Si les transitions CSS ne sont pas supportées, le menu s'affiche et se cache instantanément au survol — comportement fonctionnel sans animation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="dropdown-container">
<div class="dropdown-trigger">
Libellé
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"></path>
</svg>
</div>
<div class="dropdown-menu">
<div class="dropdown-item">Item 1</div>
<div class="dropdown-item">Item 2</div>
<div class="dropdown-item">Item 3</div>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --bg-card | #12121a | Fond du trigger et du menu déroulant. Passez en #ffffff pour un thème clair. |
| --border | rgba(255,255,255,0.08) | Couleur de bordure du trigger et du menu. Augmentez l'opacité pour un contour plus visible. |
| --radius-lg | 0.75rem | Arrondi du panel déroulant (.dropdown-menu). |
| --radius-md | 0.5rem | Arrondi du bouton trigger (.dropdown-trigger). |
| transition (.dropdown-menu) | .3s | Durée d'animation des trois propriétés (opacity, visibility, transform). .15s = vif, .5s = soyeux. |
| translateY (.dropdown-menu fermé) | -10px | Décalage vertical de départ. -20px = slide prononcé, 0 = fondu pur sans déplacement. |
| hover color (.dropdown-item) | rgba(99,102,241,.1) | Fond de survol des items. Remplacez par votre couleur d'accent. |
| min-width (.dropdown-menu) | 180px | Largeur minimale du panel. Augmentez si vos libellés sont longs. |
| top (.dropdown-menu) | calc(100% + 8px) | Espace vertical entre le trigger et le panel déroulant. |
FAQ
<div class="dropdown-trigger"> par un <button>, gérez keydown en JS (Enter/Espace pour ouvrir, Échap pour fermer), et ajoutez aria-expanded sur le bouton plus role="menu" et role="menuitem" sur les items. Le CSS de l'effet n'a pas besoin d'être modifié — pilotez une classe .open en parallèle du :hover..dropdown-container.open .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }. Le transition: .3s existant s'applique sans modification.
