Iconos de hamburguesa que se transforman
Tres botones de menú: uno se convierte en X, otro en flecha atrás y otro en X con rebote elástico.
Ajustes
Código
<div class="uv-nhb"><button type="button" class="x" aria-expanded="false" aria-label="Menú"><i></i><i></i><i></i></button><button type="button" class="ar" aria-expanded="false" aria-label="Menú"><i></i><i></i><i></i></button><button type="button" class="el" aria-expanded="false" aria-label="Menú"><i></i><i></i><i></i></button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Navegación
Ver todos: NavegaciónDónde usarlo
El icono de menú suele ser el botón más pulsado de una web en el móvil, así que su animación merece cuidado. Este conjunto ofrece tres comportamientos a elegir: una equis clásica en la que desaparece la línea central, una flecha atrás en la que gira todo el icono y una equis elástica en la que las líneas se pasan de giro y la barra central sale disparada.
Cada uno es un botón real con aria-expanded que cambia al hacer clic, así que los lectores de pantalla saben si el menú está abierto. Las líneas pasan al color secundario al abrir y el movimiento reducido mantiene el cambio sin el muelle. Copia solo la variante que necesites.