Menús para móvil
Menu Builder genera automáticamente una versión responsiva del menú para dispositivos móviles, con botón hamburguesa, animaciones y un panel deslizante completamente personalizable.
Punto de corte
Define el ancho de ventana (en píxeles) por debajo del cual el menú de escritorio se oculta y aparece el menú móvil. El valor por defecto es 768 px. Puedes ajustarlo en Menu Builder → Móvil → Punto de corte.
Tipos de menú móvil
| Tipo | Descripción |
|---|---|
| Cajón (push) | Un panel lateral que se desliza desde el borde de la pantalla y empuja el contenido de la página hacia un lado. |
| Superposición completa | Un panel a pantalla completa que cubre toda la página con un fondo semitransparente. |
| Desplegable | Un menú desplegable que aparece justo debajo de la barra de navegación. |
Botón hamburguesa
El botón para abrir y cerrar el menú móvil es completamente personalizable:
- Estilo — hamburguesa clásica, líneas con espacio, Cruz (×) o Flecha.
- Tamaño — en píxeles.
- Color — hereda el color de los enlaces del menú o usa uno personalizado.
- Alineación — izquierda, derecha o centrado dentro de la barra.
- Animación — el icono se anima al abrirse y cerrarse.
Estilo del panel
El panel móvil tiene su propia sección de estilo independiente del menú de escritorio:
- Color de fondo y color del overlay.
- Color de los enlaces y color hover.
- Tamaño y peso de la fuente.
- Animación de apertura — deslizamiento desde la izquierda, derecha, arriba o abajo.
- Dirección del cajón — izquierda o derecha.
Megamenú en móvil
Cuando un elemento del menú principal tiene un megamenú, al pulsarlo en móvil se abre un panel de pantalla completa con un botón ← Volver, dando a la navegación un aspecto de aplicación nativa.
- Visible en móvil — la navegación push descrita anteriormente.
- Oculto en móvil — el panel no se renderiza en pantallas pequeñas.
En móvil, las personalizaciones individuales de estilo del megamenú (fondo, colores, fuentes) se desactivan automáticamente para que los enlaces se muestren siempre con el estilo neutro del menú móvil.
Vista previa del teléfono en tiempo real
Mientras tienes abierta la pestaña Móvil en el panel de administración, un modelo de teléfono fijo a la derecha se actualiza en tiempo real con cada cambio de configuración móvil: estilo, color del overlay, alineación del hamburguesa, color de los enlaces y más.
El plugin respeta automáticamente la media query CSS prefers-reduced-motion. Si el visitante ha activado "Reducir movimiento" en la configuración de accesibilidad de su sistema operativo, todas las animaciones se desactivan.