Generador de menú responsive

Generador de menú responsive: para qué sirve

Todo sitio necesita un menú que funcione en la computadora y en el celular. Este generador arma el menú de navegación con tus enlaces: lado a lado en pantallas grandes y con botón hamburguesa debajo del punto de quiebre que elijas.

El código sigue las buenas prácticas de accesibilidad: elemento nav con etiqueta, botón con aria-expanded y aria-controls, cierre con la tecla Esc y al tocar un enlace, y animación del ícono que respeta la preferencia por menos movimiento. La vista previa muestra el resultado en tamaño de computadora y de celular al mismo tiempo.

Cómo usar

1. Escribe el nombre del sitio y los enlaces.
2. Elige los colores, el punto de quiebre y si el último enlace se vuelve botón.
3. Copia el HTML, el CSS y el JavaScript o descarga la página de ejemplo.

Cuándo usar

• Sitio institucional hecho a mano.
• Landing page sin framework.
• Reemplazar un menú antiguo que no funciona en el celular.

Preguntas frecuentes

¿El menú es accesible?

Sí. El botón es un elemento button con aria-expanded y aria-controls, el menú se cierra con la tecla Esc y al hacer clic en un enlace, y la navegación queda dentro de un elemento nav con aria-label. Funciona con teclado y lector de pantalla.

¿Funciona sin JavaScript?

En la computadora, sí: los enlaces aparecen siempre. En el celular el botón necesita JavaScript para abrirse; por eso el código solo oculta los enlaces cuando carga el script (clase js en el html), y sin script aparecen apilados.

¿Qué punto de quiebre usar?

Hasta unos cinco enlaces cortos, 768 px funciona bien. Con más enlaces o nombres largos, sube a 960 o 1024 px para que los elementos no se aprieten antes de convertirse en hamburguesa.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares