Comment animer une icône de menu hamburger
Comment animer une icône hamburger en bouton de fermeture : géométrie, timing, coordination avec le panneau et attributs d'accessibilité à suivre.
À retenir
L'icône hamburger est une étiquette d'état : trois lignes signifient fermé et un X signifie ouvert. Animez les lignes du haut et du bas vers les diagonales en les translatant et en les faisant pivoter, puis effacez ou masquez celle du milieu. Gardez la transition courte et symétrique, et faites changer le nom accessible du bouton et aria-expanded avec l'icône, pas seulement l'animation.
C'est un indicateur d'état, pas une décoration
L'utilisateur lit l'icône pour savoir si le menu est ouvert. L'animation doit rendre le changement évident sans devenir un spectacle. La transformation la plus lisible est celle de trois lignes devenant un X, car les formes se correspondent et l'œil peut suivre le mouvement.
La géométrie qui fonctionne
Placez les barres du haut et du bas, translatez-les vers le centre vertical, puis faites pivoter l'une de 45 degrés et l'autre de -45. La barre du milieu s'efface ou se réduit à zéro. Comme vous changez des transformations, le navigateur peut les animer à moindre coût. Gardez les barres de même longueur pour un X symétrique.
Timing et symétrie
Les deux diagonales doivent arriver ensemble. Si l'une pivote avant l'autre, l'icône semble se décomposer. Court et régulier vaut mieux que lent et élaboré. Inverser l'animation doit restaurer exactement la géométrie d'origine, pour que l'état fermé soit identique au départ.
Coordonnez avec le panneau
Le changement d'icône et l'ouverture du menu sont un seul événement. Si le panneau glisse depuis un côté, démarrez l'icône au même moment, pas après la fin du panneau. Si le panneau recouvre l'icône, l'animation est perdue : gardez le contrôle de fermeture visible ou ajoutez un bouton clair à l'intérieur.
L'accessibilité d'abord
Utilisez un vrai bouton avec un nom accessible qui alterne entre ouvrir et fermer, et gardez aria-expanded synchronisé. L'icône est décorative, donc masquez-la aux technologies d'assistance. À l'ouverture, placez le focus dans le menu ou sur le premier élément, piégez-le s'il se comporte comme une boîte de dialogue, et rendez-le au bouton à la fermeture.
Mouvement réduit
En mouvement réduit, changez l'icône sans rotation ou utilisez un très court fondu enchaîné. Le changement d'état doit rester clair, donc ne supprimez pas la différence visuelle : supprimez le déplacement.
Extrait d’implémentation en production
.icon span {
transition: transform 180ms ease, opacity 180ms ease;
}
.icon[data-open="true"] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.icon[data-open="true"] span:nth-child(2) {
opacity: 0;
}
.icon[data-open="true"] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
.icon span { transition: opacity 80ms linear; }
}Principes clés à retenir
- L'icône communique ouvert ou fermé, gardez-la synchronisée avec l'état
- Translatez et faites pivoter les barres extérieures, effacez celle du milieu
- Les deux diagonales doivent arriver ensemble
- Démarrez le changement d'icône avec le panneau, pas après
- Mettez à jour aria-expanded et le nom accessible avec l'icône
Questions fréquentes
Sources
- Disclosure Pattern — W3C WAI-ARIA Authoring Practices
- Dialog (Modal) Pattern — W3C WAI-ARIA Authoring Practices
- prefers-reduced-motion — MDN Web Docs