Aquí tienes mi selección de menú desplegable horizontal, actualizada tras revisar qué sigue vigente hoy y qué no. Cuando publiqué este artículo por primera vez, jQuery era la forma habitual de dar dinamismo a un menú de navegación y evitar que la web se sintiera estática. Hoy el panorama ha cambiado bastante: el propio navegador resuelve buena parte de lo que antes exigía cargar una librería externa.
Por eso he mantenido los 9 ejemplos clásicos con jQuery que formaban la selección original, y he añadido 4 alternativas modernas con CSS puro y JavaScript vanilla que uso más a menudo en proyectos actuales. En todos los ejemplos puedes consultar el código fuente en la web de cada autor, aunque te aviso: varios de los plugins jQuery llevan más de una década publicados y no todos los enlaces de demo siguen activos.
¿Sigue mereciendo la pena jQuery para esto en 2026?
jQuery no ha desaparecido, pero para un menú desplegable horizontal ya no aporta ventajas claras. El navegador soporta selectores CSS como :hover y :focus-within, el elemento nativo <details>, y APIs recientes como el Popover API y el anchor positioning, que resuelven el mismo problema sin sumar peso ni dependencias. Si mantienes un proyecto antiguo que ya usa jQuery en otras partes, seguir con uno de los plugins clásicos de más abajo tiene sentido práctico. Si arrancas un proyecto nuevo, te recomiendo mirar primero las alternativas modernas de la siguiente sección.
Menú desplegable horizontal moderno: CSS puro y JavaScript vanilla
Estos son los 4 patrones que uso o recomiendo hoy para construir un menú desplegable horizontal sin depender de jQuery. Cada uno cubre un caso distinto, del más simple al más completo.
1. CSS puro con :hover y :focus-within (sin una línea de JavaScript)
La forma más directa de hacer un menú desplegable horizontal es apoyarte solo en CSS: muestras el submenú con :hover para ratón y con :focus-within para que también funcione con teclado. Simon Battersby explica bien la técnica en su tutorial CSS horizontal menu with dropdowns, y si quieres ver variaciones ya montadas, la colección 20+ CSS Dropdown Menus de Freefrontend reúne bastantes ejemplos con código para copiar. Es la opción más ligera, y la que recomiendo para menús sencillos de dos niveles.
2. El elemento nativo <details> y <summary> (HTML puro, cero JavaScript)
El navegador incluye desde hace años los elementos <details> y <summary>, pensados para mostrar y ocultar contenido con un clic, sin ninguna librería. Aplicado a un menú horizontal, cada elemento de la barra se convierte en un <details> que despliega su submenú al abrirse. Chris Ferdinandi lo explica con detalle en Javascript-free dropdown menus, en su blog Go Make Things, con el CSS necesario para que se vea como un menú de verdad y no como el desplegable nativo del navegador.
3. Popover API + CSS Anchor Positioning (el enfoque más nuevo)
Desde que los navegadores principales soportan el Popover API y el anchor positioning de CSS, es posible anclar un submenú a su elemento de la barra sin cálculos de posición en JavaScript. Michelle Barker documenta el patrón completo en Anchor Positioning and the Popover API for a JS-Free Site Menu, y Cory Rylan tiene otro ejemplo práctico centrado en menús de navegación. Es la técnica más nueva de las cuatro y la que más rápido evoluciona, así que conviene revisar el soporte de navegadores antes de llevarla a producción.
4. JavaScript vanilla accesible (el patrón oficial de la W3C)
Para un menú desplegable horizontal con varios niveles, navegación completa por teclado y buen soporte de lectores de pantalla, sigue haciendo falta algo de JavaScript. El W3C publica un ejemplo de referencia en su ARIA Authoring Practices Guide (Navigation Menubar Example), con el código completo en HTML, CSS y JavaScript vanilla, sin ninguna dependencia externa. Es el que recomiendo cuando la accesibilidad es un requisito real del proyecto, no un extra.
Los 9 menús clásicos con jQuery (la selección original)
Estos son los 9 plugins de jQuery que formaban la selección original del artículo. Los mantengo porque siguen siendo una referencia visual útil, aunque son de una época —2010 a 2013— en la que jQuery era el estándar de facto para este tipo de interacción. Antes de usarlos en un proyecto nuevo, comprueba que el enlace de descarga del autor sigue activo: varios llevan más de una década sin mantenimiento visible.
- Sexy Drop Down Menu: el más básico de la selección, construido con jQuery y CSS.
- Menú con estilo Digg: recrea el desplegable horizontal del portal Digg; demo y descarga en la web del autor.
- Fancy Menu: similar a los anteriores pero con imágenes en el submenú, así que lo puedes personalizar con tu propio diseño.
- Mega Drop-Down Menu: permite añadir texto además de enlaces dentro del submenú, útil si buscas un mega menú.
- Multi-Level Drop-Down Menu JavaScript: soporta varios niveles de submenú anidados.
- Simple jQuery Dropdowns: versión minimalista, con apenas configuración necesaria.
- jQuery Drop Line Tabs: menú totalmente horizontal, incluidos los submenús, que se despliegan en línea en vez de hacia abajo.
- jdMenu Hierarchical Menu: pensado para estructuras jerárquicas con varios niveles de profundidad.
- A Different Top Navigation: los submenús se generan en la parte superior del menú principal en vez de en la parte inferior, como suele ser habitual.
Mi opinión: ¿cuál elijo hoy?
Si tengo que elegir uno para un proyecto que arranca hoy, mi favorito es la combinación de <details> y <summary> para menús de dos niveles: no depende de ninguna API en fase de adopción, funciona en cualquier navegador moderno y elimina el JavaScript sin sacrificar accesibilidad básica. Para menús más complejos, con submenús anidados o estilo mega menú, me quedo con el patrón oficial del W3C, aunque suponga escribir más código. Llevo años recomendando no añadir jQuery a un proyecto nuevo solo para resolver un menú: hoy sobra siempre que el navegador ya resuelve lo mismo de forma nativa.
Menú desplegable horizontal vs. menú responsive
Un menú desplegable horizontal y un menú responsive resuelven problemas distintos, aunque se complementan bien. El primero muestra los submenús al pasar el ratón o el foco sobre cada elemento de una barra horizontal, pensado para pantallas de escritorio con espacio suficiente. El segundo se adapta a pantallas pequeñas, normalmente colapsando en un menú de tipo hamburguesa. Si tu web necesita las dos cosas, tengo un artículo específico sobre menús responsive que puedes combinar con cualquiera de los patrones de este artículo.
Preguntas frecuentes sobre el menú desplegable horizontal
¿jQuery sigue siendo necesario para hacer un menú desplegable horizontal?
No. Hoy se puede lograr el mismo resultado con CSS puro (:hover, :focus-within, anchor positioning) o con JavaScript vanilla siguiendo el patrón ARIA del W3C. jQuery añade peso y una dependencia que ya no compensa solo para esto.
¿Cuál es la diferencia entre un menú desplegable horizontal y un menú responsive?
El desplegable horizontal muestra submenús sobre una barra de navegación pensada para escritorio. El responsive se adapta a pantallas pequeñas, normalmente con un menú hamburguesa. Son complementarios, no alternativos: revisa mi artículo sobre menú responsive para combinarlos.
¿Los 9 menús jQuery clásicos de este listado siguen funcionando?
El código en sí sigue siendo válido, pero varios enlaces de demo y descarga tienen más de una década y pueden estar caídos. Compruébalos antes de depender de ellos en un proyecto real.
¿Qué opción recomiendas si empiezo un proyecto desde cero?
Para un menú sencillo de dos niveles, <details> y <summary> sin JavaScript. Para menús complejos, con varios niveles y accesibilidad completa, el patrón oficial de JavaScript vanilla del W3C.
¿Son accesibles los 9 menús jQuery de este listado?
No todos. Son plugins de 2010-2013, anteriores a las prácticas de accesibilidad actuales. Si la navegación por teclado y los lectores de pantalla son un requisito, mejor usar el ejemplo moderno del W3C de más arriba.
Si buscas otras variantes de menú, en el blog tengo más artículos relacionados: acordeón HTML nativo sin librerías, cómo sacar la paleta de colores de una imagen con JavaScript, y plugins de redes sociales (también reescritos dejando atrás el enfoque solo-jQuery). Y si te interesa más contenido de este tipo, en la sección de desarrollo web del blog vas a encontrar más recursos parecidos.
Si alguno de estos menús desplegables horizontales te sirve para tu proyecto, compártelo: me ayuda a seguir actualizando artículos como este con recursos gratuitos y verificados.
