coastdigitalgroup/coastai-skills

Sistema de Navegación Mega Menú

Propósito

El Sistema de Navegación Mega Menú proporciona un marco visual, estructural y de interacción sistemático para paneles desplegables 2D de alta densidad y múltiples columnas. Cuando los sitios web crecen más allá de listas de navegación lineales 1D simples, un mega menú expone niveles estructurados de contenido, jerarquías de productos categorizadas, exhibiciones de características, llamadas a la acción y tarjetas promocionales destacadas dentro de una única vista expandible.

Operando como una puerta de entrada arquitectónica crítica para plataformas empresariales, tiendas de comercio electrónico a gran escala y centros de contenido, un mega menú resuelve puntos de fricción clave de navegación: enlaces profundos ocultos, caídas erráticas del hover (la "trampa del movimiento diagonal del ratón"), recorrido inaccesible por teclado, diseños caóticos de múltiples columnas y una pobre adaptación responsiva en ventanas táctiles.

Casos de Uso

• SaaS Empresarial y Plataformas B2B: Organización de ecosistemas de productos complejos (ej., Productos, Soluciones por Industria, Características de la Plataforma, Recursos, Historias de Clientes) en columnas temáticas distintas con tarjetas promocionales.
• Catálogos de Comercio Electrónico a Gran Escala: Visualización de taxonomías de productos de múltiples niveles (ej., Categoría -> Subcategoría -> Colecciones Destacadas y Marcas Principales) con miniaturas visuales enriquecidas y distintivos destacados.
• Portales Universitarios y de Conocimiento: Agrupación de departamentos administrativos, facultades académicas, portales de estudiantes y directorios de investigación en paneles categorizados de alta densidad.
• Centros de Editores y Medios: Navegación a través de múltiples verticales editoriales, series de video destacadas, etiquetas de tendencias y activadores de suscripción a boletines.

Cuándo NO Usar

• Sitios Pequeños y Medianos (< 10 páginas en total): Para arquitecturas de información planas o superficiales, usa sistema-de-navegacion-del-sitio o sistema-de-orientacion-migas-de-pan.
• Navegación de Herramientas Dentro de la Aplicación: Para barras de herramientas de aplicaciones SaaS dinámicas o herramientas de espacio de trabajo, usa sistema-de-navegacion-barra-lateral o sistema-de-paleta-de-comandos.
• Flujos de Trabajo Multietapa Secuenciales: Para el progreso de tareas lineales (ej., proceso de pago de varios pasos o asistente de incorporación), usa sistema-de-progreso-por-pasos o sistema-de-tour-de-incorporacion.
• Navegación Lineal Dentro de la Página: Para saltar a secciones dentro de un artículo o documento activo, usa sistema-de-tabla-de-contenidos.

Entradas

1. Arquitectura de la Información (IA): Estructura de árbol categorizada (Activador Padre -> Agrupaciones de Columnas -> Enlaces Hijos -> Metadatos de Descripción/Distintivo).
2. Tokens de Diseño: Escala tipográfica global, tokens de espaciado (gap, padding), rellenos de fondo, radios de borde, elevaciones de sombra y paleta de colores de acento.
3. Contenido de Activos Promocionales: Relaciones de aspecto de imagen, títulos, subtítulos y etiquetas de botones CTA para tarjetas destacadas dentro del panel.
4. Especificaciones de Interacción: Umbrales de temporización de intención de hover (retardo de entrada, retardo de salida, geometría del búfer de trayectoria del cursor) y estrategia de gestión del foco.
5. Límites de Punto de Corte: Umbrales de ventana gráfica que definen cuándo los paneles 2D de escritorio pasan a cajones de desglose de varios niveles o acordeones para dispositivos móviles.

Salidas

1. Geometría del Panel del Mega Menú y Cuadrícula Espacial: Una especificación de diseño de columnas 2D (ej., matriz de 3 columnas de enlaces + 1 columna de tarjeta promocional destacada) con límites estrictos de padding y medianil.
2. Sistema de Interacción Activador-Panel: Especificaciones del búfer de intención de hover, enrutamiento de la gestión del foco, mapeo de control por teclado y comportamiento de escape.
3. Arquitectura de Marcado Accesible: Plantilla estructural HTML con semántica ARIA completa (aria-expanded, aria-controls, aria-haspopup, role="navigation").
4. Estrategia de Adaptación Móvil Responsiva: Especificación de conversión para traducir mega paneles de escritorio en paneles de desglose optimizados para táctil o acordeones anidados.

---

Flujo de Trabajo

1. Estructurar la Cuadrícula Espacial (Composición de Columnas 2D)

Un panel de mega menú debe equilibrar la densidad de información con una alta capacidad de escaneo visual. Diseña el panel desplegable como un contenedor de cuadrícula estructurado alineado directamente con la barra de navegación principal o el ancho completo de la ventana gráfica:

• Geometría del Contenedor: Posiciona el panel de forma absoluta en relación con el encabezado de navegación principal o el contenedor del encabezado (top: 100%). Usa ancho completo (width: 100% dentro de los límites máximos del contenedor, ej., 1200px o superposición de ventana gráfica completa) con un amplio relleno interno (ej., padding: 24px 32px o var(--space-l)).
• Modos de Asignación de Columnas:
  • Diseño Estándar de 4 Columnas (3 Enlaces + 1 Promo): 3 columnas dedicadas a agrupaciones de enlaces (cada una del 22–25% de ancho) + 1 columna reservada para una tarjeta promocional destacada o bloque CTA rápido (25–30% de ancho).
  • Matriz Categorizada de 3 Columnas: 3 columnas iguales para listas de categorías de alta densidad con encabezados de categoría, subenlaces y descripciones.
  • Panel Dividido Maestro-Detalle: Columna de barra lateral izquierda (20–25% de ancho) que contiene pestañas de categorías verticales, que impulsan el contenido en un panel de visualización dinámico derecho (75–80% de ancho).
• Escala de Medianil y Espaciado: Mantén un espacio fluido estricto entre columnas (gap: 24px a 32px) para asegurar una separación visual clara sin fragmentación.

2. Diseñar la Anatomía del Contenido Dentro de las Columnas

Cada columna representa una agrupación semántica distinta. Organiza los elementos con prioridad jerárquica:

• Encabezado de Columna / Título de Sección: Usa una distinción visual clara para los encabezados de grupo (ej., mayúsculas/negrita, font-size: 0.875rem, letter-spacing: 0.05em, color de marca atenuado).
• Anatomía de la Fila del Elemento de Enlace:
  • Título: Etiqueta principal, texto de alto contraste (4.5:1 mínimo).
  • Icono / Distintivo (Opcional): Icono principal de 20x20px o distintivo final en línea (ej., "Nuevo", "Beta", "Popular").
  • Descripción (Opcional): Texto de apoyo atenuado (1–2 líneas, font-size: 0.8125rem, color con contraste 4.5:1) que explica el destino.
• Anatomía de la Tarjeta Promocional Destacada:
  • Destacando objetivos de conversión de alto valor (ej., lanzamiento de nueva función, libro electrónico, solicitud de demostración).
  • Estructurado con miniatura visual (aspect-ratio: 16/9), título en negrita, texto conciso y botón/enlace CTA estilizado. El fondo de la tarjeta debe usar un tinte sutil o contraste de superficie (background: var(--surface-subtle)).

3. Implementar la Intención de Hover y la Protección de Desplazamiento del Cursor

La "trampa del movimiento diagonal del ratón" ocurre cuando un usuario mueve su ratón en diagonal desde un activador de menú hacia un enlace en el mega panel, pasando accidentalmente sobre activadores adyacentes y cerrando prematuramente el menú.

• Búferes de Intención de Hover:
  • Umbrales de Retardo: Aplica un retardo de hover mínimo (150ms–200ms) antes de abrir un menú, evitando parpadeos cuando los cursores barren rápidamente la barra de navegación.
  • Período de Gracia de Salida: Mantén el estado abierto del panel durante 200ms–300ms después de que el cursor salga del límite del activador/panel.
• Geometría de Hover Segura (Triángulo de Apuntado):
  • Implementa un polígono de búfer direccional dinámico (triángulo de apuntado) que se origina desde la posición del activador activo hacia las esquinas superior e inferior del panel de mega menú abierto.
  • Mientras el puntero del ratón se mueva dentro de este límite triangular, ignora las transiciones de estado de hover sobre los activadores de navegación hermanos.

4. Construir Navegación por Teclado Accesible y Lógica ARIA

Un mega menú debe ser 100% operable mediante teclado y completamente inteligible para la tecnología de asistencia:

• SEMÁNTICA del Activador:
  • Usa elementos HTML <button> para los activadores que abren paneles, NO etiquetas <a> simples o <div>s.
  • Establece aria-expanded="true|false" dinámicamente según el estado del panel.
  • Establece aria-controls="mega-panel-[id]" apuntando al ID del contenedor del panel correspondiente.
  • Establece aria-haspopup="true" (o aria-haspopup="dialog" / aria-haspopup="menu" según los roles internos).
• Patrones de Recorrido por Teclado:
  • Tab: Enfoca el siguiente activador en la barra de encabezado cuando el menú está cerrado. Cuando el menú está abierto, mueve el foco al panel de mega menú abierto secuencialmente a través de los enlaces.
  • Escape: Cierra instantáneamente cualquier panel de mega menú abierto y devuelve el foco al botón activador padre.
  • Teclas de Flecha (Izquierda/Derecha): Navega entre los activadores de encabezado primarios de nivel superior.
  • Teclas de Flecha (Abajo/Arriba): Navega de arriba a abajo a través de los enlaces dentro de la columna del panel abierto.

5. Definir la Estrategia de Adaptación Móvil Responsiva

Los mega paneles de múltiples columnas de escritorio no pueden caber horizontalmente en pantallas móviles (< 768px/1024px).

• Patrón de Cajón de Desglose Móvil (Recomendado):
  • Traduce el encabezado de escritorio en un cajón deslizante móvil (100vw o 320px–400px de deslizamiento fijo).
  • Usa una pila de paneles deslizantes de varios niveles: tocar un activador primario desliza el cajón al Nivel 2 (enlaces de categoría) con un botón superior prominente "← Atrás".
• Alternativa de Apilamiento de Acordeón:
  • Los activadores primarios se colapsan verticalmente en encabezados de acordeón. Tocar un activador expande los enlaces de columna en línea debajo de él.
  • Asegúrate de que los objetivos táctiles cumplan al menos 44x44px para todos los activadores y enlaces de categoría móviles.

---

Reglas de Decisión

Selección de Patrones de Diseño de Mega Menú

Tipo de Arquitectura	Patrón de Diseño Recomendado	Criterios de Decisión
SaaS Empresarial (Productos, Soluciones, Recursos)	3 Columnas de Enlaces + 1 Columna de Tarjeta Destacada	Alta necesidad de destacar los activos de conversión principales (ej., Casos de Estudio, Demos) junto con las listas de productos.
Comercio Electrónico Profundo (100+ Categorías)	Panel Dividido Maestro-Detalle (Categorías con Pestañas)	Requiere navegar docenas de subcategorías sin sobrecargar la altura vertical de la ventana gráfica.
Centro de Contenido / Editor	Matriz Categorizada de 3 Columnas + Banner Inferior	Se centra en categorías de artículos de múltiples verticales con distintivos de etiquetas de tendencias y barra de boletín.
Plataforma de Utilidades Pesadas (Herramientas de Desarrollo, Documentación de API)	Enlaces de Texto de 4 Columnas de Alta Densidad con Distintivos	Prioriza el acceso directo a enlaces y la velocidad sobre los medios visuales promocionales.

Mecánicas de Activación: Hover vs. Clic

Comportamiento del Activador	Aplicación del Caso de Uso	Justificación de Diseño y Accesibilidad
Hover con Búfer de Intención + Soporte de Clic	Portales Web de Escritorio, SaaS Empresarial	Proporciona un escaneo rápido y de baja fricción para usuarios de ratón, manteniendo la funcionalidad de clic/toque para dispositivos híbridos.
Solo Clic Para Abrir Estricto	Paneles de Control Complejos, Aplicaciones Web de Alta Densidad	Elimina la apertura accidental durante movimientos rápidos del cursor; ideal para aplicaciones donde la precisión de la ventana gráfica es crítica.
Alternancia por Toque Táctil	Ventanas Móviles y Tabletas	Los eventos de hover del ratón no existen en las ventanas táctiles; el toque debe alternar explícitamente el estado abierto o realizar un desglose.

---

Restricciones

• Accesibilidad (WCAG 2.2 AA Mínimo):
  • SC 2.4.7 Foco Visible: Anillos de foco visibles, no recortados y de alto contraste (2px sólido de acento con desplazamiento) alrededor de todos los activadores, subenlaces y botones CTA promocionales.
  • SC 2.4.11 Foco No Obstruido: Los paneles de mega menú nunca deben ocultar el indicador de foco activo del botón activador al navegar hacia atrás.
  • SC 2.5.8 Tamaño del Objetivo: Todos los objetivos táctiles dentro de los cajones móviles y los enlaces de escritorio deben tener un mínimo de 24x24px (escritorio) y 44x44px (móvil).
  • SC 1.4.3 Contraste: Los títulos de los enlaces deben mantener al menos un contraste 4.5:1 contra los fondos del panel; el texto descriptivo secundario también debe cumplir con 4.5:1.
• Contención de Límites de la Ventana Gráfica: Los paneles de mega menú nunca deben crear desplazamiento horizontal en la página (overflow-x: hidden en los límites de la ventana gráfica) ni sangrar más allá de los bordes.
• Apilamiento de Índice Z Dinámico: Los mega menús deben usar una escala de capas de índice z clara (ej., z-index: 1000) por encima de los elementos hero, encabezados fijos y contenido de la página, pero por debajo de los cuadros de diálogo modales y los toasts.

---

Patrones de Falla Comunes

• La Trampa del Ratón (Sin Intención de Hover): Cerrar el mega panel en el instante en que el cursor sale de una línea recta estricta, frustrando a los usuarios que intentan moverse en diagonal hacia los enlaces.
• El Agujero Negro del Teclado: Abrir visualmente el mega panel al pasar el ratón, pero no permitir que el foco Tab del teclado entre al panel, haciendo que los enlaces profundos sean inaccesibles para los usuarios de lectores de pantalla y teclado.
• El Activador de Anclaje No Semántico: Usar <a href="/productos"> como un alternador de mega menú sin atributos ARIA, lo que hace que los lectores de pantalla lo anuncien como un enlace simple en lugar de un botón de menú expandible.
• El Sangrado de la Ventana Gráfica: Codificar anchos de píxel fijos (ej., 1200px) en el mega panel en pantallas de escritorio medianas (ej., 1024px), lo que provoca barras de desplazamiento horizontales.
• La Compresión del Panel de Escritorio Móvil: Reducir los mega paneles de 4 columnas de escritorio en pantallas móviles, forzando texto ilegible y objetivos táctiles microscópicos.

---

Criterios de Validación

• Cuadrícula Espacial 2D Estructurada: El panel del mega menú utiliza un diseño claro de múltiples columnas con relleno explícito, espacios entre columnas y un contenedor de tarjeta promocional opcional.
• Activadores de Botón Accesibles: Los activadores de nivel superior utilizan elementos <button> con atributos aria-expanded, aria-controls y aria-haspopup.
• Navegable por Teclado: Soporte completo de teclado que permite el recorrido secuencial con Tab dentro del panel, cierre con la tecla Escape y devolución del foco a los activadores padres.
• Intención de Hover y Búfer Seguro: Retardo de hover implementado (150ms–200ms) y período de gracia de salida (200ms–300ms) o búfer de geometría de cursor segura.
• Apilamiento/Desglose Móvil: Se convierte limpiamente en un cajón optimizado para móviles con paneles de desglose o acordeones verticales en pantallas < 768px.
• Cumplimiento de Contraste AA: Todo el texto (títulos de enlaces, encabezados de categorías, descripciones de apoyo) cumple al menos con un contraste 4.5:1 contra el fondo del panel.
• Anillos de Foco No Obstruidos: Cada enlace y botón enfocable dentro del mega menú tiene un indicador de foco activo, visible y de alto contraste.