Icônes hamburger qui se transforment
Trois boutons de menu : l'un devient une croix, l'autre une flèche retour, le dernier une croix élastique.
Réglages
Code
<div class="uv-nhb"><button type="button" class="x" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button><button type="button" class="ar" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button><button type="button" class="el" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button></div>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
L'icône de menu est souvent le bouton le plus pressé d'un site mobile, son animation mérite donc du soin. Cet ensemble propose trois comportements : une croix classique où la ligne du milieu disparaît, une flèche retour où toute l'icône pivote, et une croix élastique où les lignes dépassent leur rotation et la barre centrale file sur le côté.
Chacun est un vrai bouton avec aria-expanded, les lecteurs d'écran savent donc si le menu est ouvert. Les lignes passent à la couleur secondaire à l'ouverture, et le mouvement réduit garde le changement d'état sans ressort. Copie seulement la variante utile.