Hamburger Menu
Trois barres CSS glissent et pivotent en 300 ms pour former une croix de fermeture — aucune dépendance, un simple basculement de classe.
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
Trois <span> sont positionnés en absolute dans un conteneur 30×24 px relatif. Par défaut : barre 1 en top:0, barre 2 centrée par translateY(-50%), barre 3 en bottom:0. L'animation complète est produite par transition: .3s sur les propriétés CSS — aucun calcul JavaScript n'intervient.
L'ajout de la classe .active sur le conteneur déclenche trois transitions simultanées : la barre 1 monte en top:50%; transform: translateY(-50%) rotate(45deg), la barre 2 disparaît (opacity:0) en glissant vers la gauche (translateX(-20px)), et la barre 3 remonte en bottom:50%; transform: translateY(50%) rotate(-45deg). Les deux barres survivantes se croisent exactement au centre pour former un X.
Le JavaScript livré avec l'effet gère la navigation mobile du site (ouverture de .mobile-menu, fermeture à Escape, mise en surbrillance du lien actif) et le basculement de thème — la logique visuelle du hamburger est purement CSS. En intégration, un seul classList.toggle('active') suffit pour piloter l'animation.
Accessibilité
- prefers-reduced-motion absent : la transition de 300 ms s'exécute systématiquement. Pour se conformer à WCAG 2.3.3, ajouter
@media (prefers-reduced-motion: reduce) { .hamburger span { transition: none; } }. - Le conteneur est un
<div>aveccursor:pointer— sansrole="button"nitabindex="0", il est invisible au clavier et aux lecteurs d'écran. En production, privilégier un<button>natif. aria-expandedabsent : l'état ouvert/fermé du menu n'est pas transmis aux technologies d'assistance. À ajouter sur le déclencheur et mis à jour en JS.- Contraste des barres : blanc
#fffsur fond#0a0a0f→ ratio > 15:1, conforme WCAG AA et AAA. - La touche Escape ferme le menu mobile via le JS fourni (cible
.mobile-menu) — adapter si le menu est dans un autre élément.
Compatibilité navigateur
Nécessite CSS Transitions (niveau 3) — supportées dans tous les navigateurs modernes depuis 2012. Zéro dépendance externe.
Sans CSS Transitions (IE 9-), les barres basculent instantanément en position X — l'état fermé reste lisible, sans animation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<button class="hamburger" type="button" aria-expanded="false" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>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 |
|---|---|---|
| width / height sur .hamburger | 30 px / 24 px | Taille du conteneur. Conserver un ratio 5:4 pour que les barres restent régulièrement espacées. |
| height sur .hamburger span | 3 px | Épaisseur des barres. 2 px = fin et élégant, 4-5 px = gras et affirmé. |
| background sur .hamburger span | #fff | Couleur des barres. Remplacer par votre couleur brand ou un custom property CSS. |
| transition sur .hamburger span | .3s | Durée et easing. .2s = réactif, .5s = cinématique. Exemple : .3s ease-in-out. |
| border-radius sur .hamburger span | 2 px | Arrondi des extrémités. 0 = carré strict, 100px = capsule. |
| translateX(-20px) dans .active span:nth-child(2) | -20 px | Amplitude du glissement latéral de la barre centrale. Augmenter à -40 px pour un effet de sortie plus dramatique. |
FAQ
.active sur l'élément .hamburger : document.querySelector('.hamburger').classList.toggle('active'). Aucune librairie nécessaire.transition sur .hamburger span. Exemple : transition: .2s ease-in pour une fermeture vive, ou transition: .5s cubic-bezier(.68,-.55,.27,1.55) pour un rebond au retour.isOpen) dans votre composant : className={isOpen ? 'hamburger active' : 'hamburger'} (React) ou :class="{'active': isOpen}" (Vue). Aucune adaptation JavaScript supplémentaire.
