Menú responsive y off-canvas
Proporciona un sistema de menú responsive con navegación móvil off-canvas utilizando la biblioteca mmenu y un menú horizontal opcional para anchos de escritorio.
responsive_menu
Install
composer require 'drupal/responsive_menu:^4.4'
Overview
El módulo Responsive Menu integra la biblioteca JavaScript mmenu con el sistema de menús de Drupal para proporcionar una experiencia de navegación moderna y responsive. En anchos de navegador más estrechos, muestra un menú móvil off-canvas que puede activarse mediante un icono de alternancia (menú hamburguesa) o gesto de deslizamiento. En anchos de pantalla más amplios, puede mostrar un menú horizontal con soporte opcional de desplegables a través de la biblioteca Superfish.
El módulo se integra con los breakpoints de tu tema para permitir un control preciso sobre cuándo aparece el menú horizontal. Soporta múltiples temas visuales (claro, oscuro, negro, blanco), posicionamiento izquierdo/derecho/contextual para idiomas RTL, efectos de atenuación de página cuando se abre el menú y compatibilidad con temas Bootstrap 4.
Se proporcionan dos bloques: un bloque de menú horizontal para navegación de escritorio y un bloque de icono de alternancia móvil para abrir el menú off-canvas. El bloque de menú horizontal es opcional - puedes usar solo el menú off-canvas o integrarlo con otras soluciones de menú como la navbar de Bootstrap.
Features
- Menú móvil off-canvas impulsado por la biblioteca JavaScript mmenu con animaciones de deslizamiento suaves
- Menú de escritorio horizontal con profundidad máxima configurable y mejoras opcionales de desplegables Superfish
- Integración con breakpoints del tema para controlar cuándo se muestra el menú horizontal vs. el menú móvil
- Cuatro temas visuales incorporados: Claro, Oscuro, Negro y Blanco
- Posición del menú configurable: izquierda, derecha o contextual (cambia automáticamente según la dirección del idioma para soporte RTL)
- Efectos de atenuación de página cuando se abre el menú: ninguno, color predeterminado, blanco o negro
- Gesto opcional de deslizamiento/arrastre para abrir el menú móvil
- Modo de compatibilidad con temas Bootstrap 4 - intercepta el alternador de navbar de Bootstrap para abrir mmenu
- Integración con biblioteca Superfish para comportamiento mejorado de desplegables con retardo configurable, velocidad y soporte hoverIntent
- Capacidad de fusionar múltiples menús de Drupal en una única estructura de menú off-canvas
- Opción fly-left para elementos de menú de tercer nivel y más profundos para prevenir flyouts fuera de pantalla
- Soporte de polyfills para IE11
- Inserción automática de div contenedor de página para temas que carecen de uno
- Corrección de viewport de Chrome para renderizado móvil adecuado
- Soporte de navegación por teclado en menú off-canvas
- Extensos alter hooks para personalizar el comportamiento del menú
Use Cases
Navegación responsive mobile-first
Usa el módulo para proporcionar una experiencia de navegación mobile-first consistente. Coloca el bloque 'Responsive menu mobile icon' en tu región de cabecera. En anchos móviles, los usuarios ven el icono hamburguesa que abre un menú off-canvas completo. Configura un breakpoint (ej., 960px) en el cual el icono de alternancia se oculta y opcionalmente muestra un bloque de menú horizontal para usuarios de escritorio.
Navegación solo off-canvas
Si prefieres usar solo el menú off-canvas en todos los tamaños de pantalla, desmarca 'Usar un breakpoint' en configuración. Esto mantiene el icono de alternancia móvil visible en todos los anchos. Este enfoque funciona bien para sitios con navegación compleja que se beneficia de la presentación off-canvas independientemente del tamaño de pantalla.
Fusionar múltiples menús para móvil
Muchos sitios tienen navegación principal separada y menús de utilidades (cuenta, selector de idioma, etc.) en anchos de escritorio. Usa la configuración 'off_canvas_menus' para especificar múltiples nombres máquina de menú (ej., 'main,utility') para fusionarlos en un único menú off-canvas para usuarios móviles, proporcionando una experiencia de navegación móvil unificada.
Integración con tema Bootstrap 4
Para sitios que usan temas Bootstrap 4 como bootstrap_barrio, habilita 'Modo de compatibilidad Bootstrap'. Coloca tu bloque de navegación principal en la región 'Navigation (Collapsible)'. El módulo automáticamente interceptará el botón alternador de navbar de Bootstrap para abrir el menú off-canvas de mmenu en su lugar, proporcionando una experiencia móvil más pulida.
Soporte de idiomas RTL
Para sitios multilingües que soportan idiomas RTL como árabe o hebreo, establece la posición off-canvas a 'Contextual'. El menú automáticamente se abrirá desde la izquierda para idiomas LTR y desde la derecha para idiomas RTL, siguiendo los patrones de lectura esperados.
Menús desplegables mejorados con Superfish
Habilita la integración Superfish para el menú horizontal para obtener comportamiento de desplegables mejorado incluyendo retardos configurables, animaciones suaves y soporte opcional de hoverIntent para interacciones de hover más tolerantes. Esto es particularmente útil para menús con múltiples niveles de desplegables.
Navegación móvil táctil
Habilita la opción 'gesto de arrastrar para abrir' para permitir a los usuarios móviles deslizar desde el borde de la pantalla para abrir el menú off-canvas, además de tocar el icono de alternancia. Esto proporciona una experiencia más similar a una aplicación móvil nativa.
Menú personalizado por página vía hooks
Usa hook_responsive_menu_off_canvas_menu_names_alter() o hook_responsive_menu_horizontal_menu_name_alter() para mostrar diferentes menús en diferentes páginas. Por ejemplo, muestra un menú especial de landing page en la portada o un menú específico de sección dentro de ciertas áreas de contenido.
Tips
- Copia el CSS del módulo (css/responsive_menu.css) en tu tema y deshabilita 'Cargar el CSS del módulo responsive_menu' para una personalización más fácil.
- Usa hook_preprocess_page() en tu tema para añadir configuración personalizada de mmenu vía drupalSettings.responsive_menu.custom para opciones avanzadas como títulos de navbar o nombres de clase personalizados.
- La clase predeterminada 'menu-item--active-trail' para elementos seleccionados funciona con temas que usan classy como base. Sobrescribe vía configuración personalizada si tu tema usa clases diferentes.
- La biblioteca mmenu ha cambiado a una licencia Creative Commons Attribution-NonCommercial - necesitarás pagar para uso comercial. Consulta https://mmenujs.com para detalles de licencia.
- Para mejor rendimiento, el menú off-canvas se renderiza una vez y se cachea. Limpia el tag de cache 'offcanvas_render' cuando hagas cambios que deban reflejarse inmediatamente.
- Prueba la funcionalidad del menú en diferentes navegadores y dispositivos, especialmente si soportas navegadores antiguos - habilita polyfills de IE11 si es necesario.
- Cuando uses menús fusionados, los elementos aparecen en el orden en que se listan los menús. Pon tu menú de navegación principal primero para el ordenamiento esperado.
Technical Details
Admin Pages 1
/admin/config/user-interface/responsive-menu
Configura todos los aspectos del menú responsive incluyendo qué menús mostrar, configuración de breakpoints, apariencia visual y mejoras de JavaScript.
Hooks 7
hook_responsive_menu_off_canvas_menu_names_alter
Altera los nombres de menú usados por el menú responsive off-canvas. Permite cambiar qué menú(s) se muestran en el menú móvil off-canvas basándose en condiciones.
hook_responsive_menu_horizontal_menu_name_alter
Altera el nombre del menú usado por el menú responsive horizontal. Permite mostrar diferentes menús horizontales en diferentes páginas.
hook_responsive_menu_off_canvas_tree_alter
Altera el árbol del menú off-canvas después de que ha sido construido. Permite modificar títulos de elementos de menú, atributos o estructura.
hook_responsive_menu_horizontal_tree_alter
Altera el árbol del menú horizontal después de que ha sido construido. Permite modificar títulos de elementos de menú, atributos o estructura.
hook_responsive_menu_off_canvas_manipulators_alter
Altera los manipuladores antes de transformar el árbol del menú off-canvas. Permite añadir manipuladores de árbol de menú personalizados.
hook_responsive_menu_horizontal_manipulators_alter
Altera los manipuladores antes de transformar el árbol del menú horizontal. Permite añadir manipuladores de árbol de menú personalizados.
hook_responsive_menu_off_canvas_output_alter
Altera si el menú off-canvas debe mostrarse. Útil para deshabilitar el menú bajo condiciones específicas como para ciertos temas, roles de usuario o páginas.
Troubleshooting 8
Asegúrate de que la biblioteca mmenu esté correctamente instalada en /libraries/mmenu/dist/mmenu.js. Verifica el informe de estado en /admin/reports/status para los requisitos de biblioteca. También verifica que tu tema tenga un div envolvente de página - si no, habilita 'Añadir un div contenedor de página al tema del frontend' en configuración.
Verifica que el bloque 'Horizontal menu' esté colocado en una región. Comprueba que 'Usar un breakpoint' esté habilitado y se haya seleccionado un breakpoint válido. Asegúrate de que tu tema tenga breakpoints definidos en su archivo .breakpoints.yml. Limpia caches después de cambiar configuraciones de breakpoint.
Habilita la opción 'Modificar dinámicamente el meta tag viewport'. Chrome requiere valores específicos de viewport para que mmenu se renderice correctamente en dispositivos móviles.
Asegúrate de que 'Modo de compatibilidad Bootstrap' esté habilitado. Verifica que el alternador de navbar de Bootstrap esté dentro de un elemento con ID #navbar-main. Comprueba que tu bloque de navegación principal esté en la región correcta.
Verifica que la biblioteca Superfish esté instalada en /libraries/superfish/dist/js/superfish.min.js. Ten en cuenta que Superfish requiere jQuery, así que tu tema debe incluir jQuery. Verifica el informe de estado para los requisitos de biblioteca.
El módulo incluye código de integración con toolbar que maneja esto. Si los problemas persisten, asegúrate de que la biblioteca responsive_menu.toolbar se esté cargando. Intenta limpiar todos los caches.
Edita el elemento de menú padre y marca la opción 'Fly left' (disponible para elementos en profundidad 3 o mayor). Esto causa que los elementos hijos vuelen hacia la izquierda en lugar de la derecha, previniendo el renderizado fuera de pantalla.
El CSS de breakpoint se genera en el directorio public://css. Asegúrate de que este directorio sea escribible. Limpia caches para activar la regeneración. Verifica que tu tema tenga breakpoints válidos definidos.
Security Notes 2
- El módulo respeta los controles de acceso de menú de Drupal - solo se muestran los elementos de menú accesibles para el usuario actual.
- La biblioteca mmenu usa una licencia Creative Commons NonCommercial. Asegura el cumplimiento con los términos de licencia para proyectos comerciales.