Menú Desplegable Superfish
Integra el plugin jQuery Superfish con los menús de Drupal para crear menús de navegación desplegables hermosos y accesibles.
superfish
Install
composer require 'drupal/superfish:8.x-1.13'
Overview
El módulo Superfish integra el popular plugin jQuery Superfish con el sistema de menús de Drupal, permitiendo a los constructores de sitios crear menús de navegación desplegables sofisticados. Proporciona bloques de menú mejorados que soportan diseños horizontales, verticales y de barra de navegación con animaciones suaves, sombras y indicadores de flecha.
El módulo incluye amplio soporte para diseño responsivo a través de los plugins sf-Smallscreen y sf-Touchscreen, que adaptan automáticamente los menús para dispositivos móviles basándose en el ancho de ventana o detección de agente de usuario. El modo Smallscreen puede convertir los menús en navegación estilo acordeón o elementos select desplegables.
Superfish también soporta mega menús multicolumna, opciones de estilo personalizadas (con temas prediseñados para estilos negro, azul, café, blanco y predeterminado), y varios efectos de animación incluyendo deslizamientos verticales, horizontales y diagonales. La integración opcional con la biblioteca jQuery Easing proporciona efectos de animación adicionales.
Las características clave incluyen hoverIntent para prevenir la activación accidental del menú, Supposition para posicionamiento inteligente de submenús dentro del viewport, y Supersubs para cálculo dinámico del ancho de submenús. El módulo es completamente accesible con atributos ARIA y soporta idiomas RTL.
Features
- Múltiples tipos de menú: diseños horizontal (fila única), horizontal doble fila (barra de navegación) y vertical (apilado)
- Estilos visuales prediseñados: Default, Black, Blue, Coffee, White o None para estilo personalizado
- Efectos de animación de deslizamiento con opciones verticales, horizontales y diagonales
- Integración con la biblioteca jQuery Easing para efectos de animación avanzados (easeInSine, easeOutBounce, etc.)
- Diseño responsivo con plugin sf-Smallscreen que convierte menús en acordeones o elementos select en móviles
- Plugin sf-Touchscreen para compatibilidad con dispositivos táctiles con comportamientos de toque configurables
- Plugin Supersubs para cálculo automático del ancho de submenús basado en el contenido
- Plugin Supposition para posicionamiento inteligente de submenús para prevenir desbordamiento fuera del viewport
- Integración jQuery hoverIntent para prevenir activación accidental del menú durante movimientos rápidos del mouse
- Soporte de mega menú multicolumna con profundidad y niveles configurables
- Clases CSS personalizadas para elementos UL, LI e hipervínculos
- Inserción u ocultación de descripción de enlaces (manejo del atributo title)
- Clases CSS basadas en profundidad (sf-depth-1, sf-depth-2, etc.) para estilo avanzado
- Opción de clonar enlaces padre para agregar el enlace padre en la parte superior de los submenús para navegación más fácil
- Restauración de nivel de ruta usando clases active-trail
- Soporte para opción de menú expandido para mostrar solo submenús padre expandidos
- Velocidad de animación configurable (slow, normal, fast o milisegundos)
- Retardo del mouse configurable para cierre de submenús
- Soporte para idiomas RTL con detección automática de dirección
- Atributos ARIA para accesibilidad (role=menu, aria-haspopup, aria-expanded)
- Métodos de detección de agente de usuario: lado del cliente (JavaScript) o lado del servidor (PHP)
- Configuración de punto de quiebre de ancho de ventana para características responsivas
- Integración con el módulo translatable_menu_link_uri para sobrescrituras de enlaces multilingües
- Integración con el módulo menu_manipulator para filtrado de menús basado en idioma
Use Cases
Navegación Principal del Sitio con Menús Desplegables
Crear una barra de navegación horizontal con submenús desplegables multinivel. Coloque un bloque Superfish en la región del encabezado, seleccione el menú Navegación principal, use tipo de menú horizontal con el estilo predeterminado, habilite flechas y sombras para un acabado visual pulido, y habilite hoverIntent para prevenir la activación accidental de submenús.
Navegación Responsiva Mobile-First
Construir navegación que se adapte a dispositivos móviles. Configure el bloque Superfish con sf-Smallscreen habilitado usando el modo de ancho de ventana con un punto de quiebre de 768px. Elija el tipo acordeón para el menú móvil, que proporciona una navegación expandible amigable al tacto. También habilite sf-Touchscreen para dispositivos tablet para asegurar que el primer toque expanda y el segundo toque navegue.
Mega Menú con Diseño Multicolumna
Crear un mega menú para sitios de comercio electrónico o con mucho contenido. Habilite submenús multicolumna en la configuración del bloque, establezca la profundidad inicial en 1 y configure 2-3 niveles. Esto crea submenús amplios con múltiples columnas, ideal para mostrar jerarquías de categorías. Use clases CSS personalizadas para dar más estilo a las columnas.
Navegación Vertical en Barra Lateral
Agregar un menú de navegación vertical a una región de barra lateral. Seleccione el tipo de menú vertical, que apila los elementos del menú verticalmente con submenús que aparecen a un lado. Habilite Supposition para asegurar que los submenús permanezcan dentro del límite del viewport. Esto es ideal para interfaces de administración o navegación secundaria.
Navegación Optimizada para Táctil
Configurar menús específicamente para dispositivos con pantalla táctil. Habilite sf-Touchscreen con detección de agente de usuario, seleccione el comportamiento donde el primer toque muestra los hijos y el segundo toque abre el enlace. Habilite la opción clone_parent para agregar enlaces padre en la parte superior de los submenús, facilitando a los usuarios táctiles navegar a las páginas padre.
Navegación con Tema Personalizado
Crear una navegación con estilo completamente personalizado. Establezca la opción de Estilo en 'None', luego copie una de las hojas de estilo de muestra de la biblioteca a su tema. Renombre o elimine los selectores .sf-style-default y aplique su propio CSS. Agregue clases personalizadas usando la configuración Avanzada para apuntar a elementos específicos.
Tips
- Use un inspector DOM como las Herramientas de Desarrollador de Firefox para modificar temporalmente los estilos del menú en tiempo real mientras desarrolla temas personalizados
- Establezca el retardo del mouse en un valor muy alto (ej. 99999999) durante el desarrollo para que los submenús permanezcan abiertos más tiempo para inspección
- Al personalizar estilos, copie el CSS de muestra del directorio de estilos de la biblioteca a su tema en lugar de modificar los archivos de la biblioteca directamente
- El módulo genera automáticamente IDs HTML únicos para elementos del menú usando el patrón {menu_name}-{link_id}
- Habilite hoverIntent para mejorar la experiencia del usuario previniendo que los menús se activen durante movimientos rápidos del mouse a través de la navegación
- El plugin Supposition está habilitado por defecto y reposiciona inteligentemente los submenús que de otro modo aparecerían fuera de la ventana del navegador
- Para sitios con muchos niveles de menú, use la configuración de niveles de ruta con cuidado - cambiarla del valor predeterminado de 1 puede causar comportamiento inesperado con el resaltado del trail activo
- Los menús multicolumna funcionan mejor con contenido consistente entre columnas; pruebe con contenido real para asegurar diseños balanceados
- Al usar detección de agente de usuario para características responsivas, la detección PHP del lado del servidor proporciona renderizado inicial más rápido pero JavaScript del lado del cliente es más preciso para usuarios con proxy
- El módulo se integra automáticamente con los módulos translatable_menu_link_uri y menu_manipulator cuando están instalados
Technical Details
Hooks 1
hook_superfish_tree_manipulators_alter
Permite a los módulos alterar la lista de manipuladores del árbol de menú utilizados al construir menús Superfish. Los manipuladores pueden modificar elementos del menú, filtrar acceso, ordenar elementos o transformar enlaces antes del renderizado.
Troubleshooting 8
Limpie la caché de Drupal en Administración > Configuración > Desarrollo > Rendimiento. Si la biblioteca no está instalada, también verá un mensaje de advertencia.
Verifique que la biblioteca Superfish esté instalada en el directorio libraries/drupal-superfish/. Revise el Informe de estado (Administración > Informes > Informe de estado) para el estado de la biblioteca. Asegúrese de que la biblioteca contenga superfish.js y la carpeta css.
Habilite el plugin jQuery Supposition en la configuración del bloque, que reposiciona los submenús para permanecer dentro de la ventana del navegador. También verifique los valores z-index en el CSS de su tema si los menús aparecen detrás de otros elementos.
Habilite sf-Touchscreen y/o sf-Smallscreen en la configuración del bloque. Para dispositivos táctiles, configure el valor del punto de quiebre (predeterminado 768px) y pruebe en dispositivos reales. Asegúrese de que su tema incluya la meta etiqueta viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Instale la biblioteca jQuery Easing descargando jquery.easing.js y colocándolo en libraries/easing/jquery.easing.js. Después de la instalación, actualice la página de configuración del bloque para ver opciones adicionales de animación easing.
Verifique que los enlaces del menú estén configurados con rutas correctas. El módulo usa tanto coincidencia de rutas como comparación de URLs para determinar estados activos. Para enlaces ancla (#), solo se compara la ruta base.
Al usar Estilo: None con el modo acordeón sf-Smallscreen, debe establecer un título de menú acordeón personalizado o aplicar CSS personalizado para dar estilo al botón de alternancia del acordeón. Los estilos predeterminados proporcionan visibilidad, pero el estilo None requiere implementación personalizada.
Ajuste la configuración de Velocidad de animación (predeterminado: fast) y la configuración de Retardo del mouse (predeterminado: 800ms). Valores más bajos hacen los menús más responsivos. Considere deshabilitar hoverIntent si se necesita respuesta inmediata, aunque esto puede causar activación accidental.