Comment utiliser : Icônes menu hamburger
- Survolez une icône pour la voir s’ouvrir, ou cochez Afficher l’état ouvert pour les voir toutes ouvertes. Cliquez sur celle qui vous plaît.
- Réglez la largeur, l’épaisseur, l’espacement, la couleur et la vitesse. Chaque icône se met à jour en direct.
- Copiez le CSS, le HTML et le JS, ou utilisez Tout copier pour obtenir un seul bloc.
- Pour Webflow, appuyez sur Copier pour Webflow puis collez dans le Designer avec Ctrl/⌘+V.
Un bouton de menu accessible à tous
Chaque icône est un vrai <button>, et non une div cliquable : elle fonctionne donc au clavier et avec les lecteurs d’écran dès le départ.
- aria-expanded indique aux technologies d’assistance si le menu est ouvert, et le CSS utilise le même attribut pour animer l’icône. Une seule source de vérité.
- aria-label nomme le bouton, puisqu’il n’a pas de texte visible.
- Zone de clic : le padding maintient la zone cliquable à au moins 44 pixels de côté.
- Mouvement réduit désactive l’animation pour les visiteurs qui demandent moins de mouvement.
Relier l’icône à votre menu
Le petit script bascule aria-expanded au clic. Pour afficher votre menu, ajoutez aria-controls="menu" et une règle comme .burger[aria-expanded="true"] ~ #menu { display: block; }, ou basculez une classe sur le menu dans le même gestionnaire de clic.
Dans Webflow, Copier pour Webflow insère un Embed avec l’icône, les styles et le script. Pour ouvrir une barre de navigation Webflow avec cette icône, placez l’Embed dans l’élément Menu Button de la barre. Voir aussi : Styles de boutons CSS, Générateur d’animations au survol CSS, Générateur de loader CSS.
Aussi recherché comme : icône menu hamburger, animation menu hamburger, menu burger css, menu hamburger css, icône hamburger animée, transformer hamburger en croix, menu hamburger webflow, animation icône menu css.
Outils complémentaires : Icônes menu hamburger
- Générateur de boutons CSS — Concevez un bouton qui rend bien dans chaque état.
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
- Générateur de menu select — Arrêtez de saisir les options à la main.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.