Cómo usar: Iconos Menú Hamburguesa
- Pasa el cursor sobre un icono para ver cómo se abre, o marca Mostrar estado abierto para verlos todos abiertos. Haz clic en el que más te guste.
- Ajusta el ancho, grosor, espacio entre líneas, color y velocidad. Cada icono se actualiza en tiempo real.
- Copia el CSS, el HTML y el JS, o usa Copiar todo para obtener un solo bloque.
- Para Webflow, pulsa Copiar a Webflow y pega en el Designer con Ctrl/⌘+V.
Un botón de menú que todos pueden usar
Cada icono es un <button> real, no un div clicable, así que funciona con teclado y lectores de pantalla desde el primer momento.
- aria-expanded indica a las tecnologías de apoyo si el menú está abierto, y el CSS usa ese mismo atributo para animar. Una sola fuente de verdad.
- aria-label nombra el botón, ya que no tiene texto visible.
- Área táctil: el padding mantiene la zona clicable de al menos 44 píxeles cuadrados.
- Movimiento reducido desactiva la animación para los visitantes que piden menos movimiento.
Conectarlo a tu menú
El pequeño script cambia aria-expanded al hacer clic. Para mostrar tu menú, añade aria-controls="menu" y una regla como .burger[aria-expanded="true"] ~ #menu { display: block; }, o alterna una clase en el menú dentro del mismo manejador de clic.
En Webflow, Copiar a Webflow pega un Embed con el icono, los estilos y el script. Para abrir una barra de navegación de Webflow con él, coloca el Embed dentro del elemento Menu Button de la barra. Relacionado: CSS Button Styles, CSS Hover Animation Generator, CSS Loader Generator.
También se busca como: icono menú hamburguesa, animación menú hamburguesa, menú hamburguesa animado css, menú hamburguesa css, icono hamburguesa a x, animación icono menú, menú hamburguesa webflow, hamburger menu css.
Herramientas que combinan con: Iconos Menú Hamburguesa
- Generador de Botones CSS — Diseña un botón que se vea bien en todos los estados.
- Generador de Keyframes CSS — Un editor visual para @keyframes.
- Generador de Select — Deja de escribir las listas de opciones a mano.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.