Mega menú con vista previa
Un desplegable con secciones a la izquierda y una tarjeta que cambia según la opción que señalas.
Ajustes
Código
<nav class="uv-nmg" aria-label="Principal"><ul class="tb"><li class="dd"><button type="button" aria-expanded="false" aria-controls="uv-nmg-p">Productos<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><div class="pn" id="uv-nmg-p"><ul class="ls"><li style="--c:#6366f1"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg><span><b>Analítica</b><small>Paneles en tiempo real</small></span></a></li><li style="--c:#f59e0b"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span><b>Automatización</b><small>Flujos sin código</small></span></a></li><li style="--c:#10b981"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z"/></svg><span><b>Seguridad</b><small>Accesos y auditoría</small></span></a></li><li style="--c:#ec4899"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><path d="M17 13.5v7M13.5 17h7"/></svg><span><b>Integraciones</b><small>Más de 200 apps</small></span></a></li></ul><div class="pv"><div class="cd" style="--c:#6366f1"><i></i><b>Analítica</b><span>Paneles en tiempo real. Pruébalo gratis 14 días.</span></div><div class="cd" style="--c:#f59e0b"><i></i><b>Automatización</b><span>Flujos sin código. Pruébalo gratis 14 días.</span></div><div class="cd" style="--c:#10b981"><i></i><b>Seguridad</b><span>Accesos y auditoría. Pruébalo gratis 14 días.</span></div><div class="cd" style="--c:#ec4899"><i></i><b>Integraciones</b><span>Más de 200 apps. Pruébalo gratis 14 días.</span></div></div></div></li><li><a href="#">Precios</a></li><li><a href="#">Clientes</a></li></ul></nav>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Navegación
Ver todos: NavegaciónDónde usarlo
Las webs SaaS y las tiendas grandes usan mega menús para explicar qué hay en cada sección antes del clic. Este se abre desde una barra superior compacta al pasar el ratón o con el foco del teclado, lista cuatro productos con icono y una línea de descripción y enseña a la derecha una tarjeta de color que cambia según la opción señalada o enfocada.
La lógica de la vista previa es CSS puro con :has, así que funciona aunque los scripts tarden. Unas líneas de JavaScript solo sincronizan aria-expanded y cierran el panel con Escape. Cambia las tarjetas por capturas o promociones y repite la estructura en cada sección.