Crear menús megadropdown en WordPress sin plugins

Introducción

Los mega dropdown o mega menús permiten mostrar múltiples enlaces, imágenes o widgets organizados por columnas, enriqueciendo la experiencia de navegación. En WordPress, existen plugins que facilitan esta tarea, pero muchas veces su instalación incrementa el peso del sitio, introduce dependencias y sobrecarga de estilos. En este artículo detallado aprenderás a crear tu propio menú mega dropdown sin plugins, usando únicamente HTML, CSS y un poco de JavaScript, todo integrado en tu tema o child theme.

¿Qué es un mega dropdown

Un mega dropdown es un panel desplegable de gran tamaño que contiene secciones divididas en columnas. A diferencia de los submenús simples, los mega dropdown muestran de forma simultánea varias categorías o contenido multimedia, lo que mejora la usabilidad en sitios con un árbol de navegación complejo.

Ventajas de implementar un mega dropdown sin plugins

• Ligereza: Menos archivos CSS/JS cargados.
• Control total: Personalización absoluta sin restricciones de un plugin.
• Mantenimiento: Evitas actualizaciones y posibles conflictos.
• Accesibilidad: Puedes asegurar un marcado semántico y ARIA según tus necesidades.

1. Registrar los menús en functions.php

Para empezar, abrimos functions.php de nuestro tema o child theme y registramos la ubicación de nuestro menú principal:

add_action(after_setup_theme, custom_theme_menus)
function custom_theme_menus() {
  register_nav_menus(array(
    primary =gt Menú Principal
  ))
}

  

2. Agregar el marcado HTML en header.php

En header.php ubicamos la llamada al menú y generamos el contenedor para el mega dropdown:

ltnav class=main-nav role=navigation style=background:#fff border-bottom:1px solid #ccc display:flex justify-content:space-between padding:10px 20pxgt
  ltphp
    wp_nav_menu(array(
      theme_location =gt primary,
      container =gt false,
      menu_class =gt nav-menu,
      fallback_cb =gt false,
      depth =gt 2
    ))
  gt
lt/navgt

  

3. Estilos CSS inline para el mega dropdown

A continuación incluimos estilos esenciales para la estructura y el diseño minimalista.

4. Añadir el contenido del mega menú en el mismo Header

Extendemos el ltligt con clases específicas y estructuras por columnas:

ltli class=menu-item menu-item-has-childrengt
  lta href=#gtCategoríaslt/agt
  ltdiv class=mega-dropdowngt
    ltdiv class=mega-columngt
      lth4gtSección 1lt/h4gt
      ltulgt
        ltligtlta href=#gtEnlace Alt/agtlt/ligt
        ltligtlta href=#gtEnlace Blt/agtlt/ligt
      lt/ulgt
    lt/divgt
    ltdiv class=mega-columngt
      lth4gtSección 2lt/h4gt
      ltulgt
        ltligtlta href=#gtEnlace Clt/agtlt/ligt
        ltligtlta href=#gtEnlace Dlt/agtlt/ligt
      lt/ulgt
    lt/divgt
    ltdiv class=mega-columngt
      lth4gtImagen destacadalt/h4gt
      ltimg src=https://via.placeholder.com/150 alt=Ejemplo style=max-width:100% height:auto /gt
    lt/divgt
  lt/divgt
lt/ligt

  

5. JavaScript para interactividad (opcional)

Si deseas un comportamiento de clic en móviles en lugar de hover, puedes añadir un pequeño script. Insertarlo justo antes de lt/bodygt:

ltscriptgt
document.querySelectorAll(.menu-item-has-children gt a).forEach(function(link) {
  link.addEventListener(click, function(e) {
    var submenu = link.nextElementSibling
    if (submenu  submenu.classList.contains(mega-dropdown)) {
      e.preventDefault()
      submenu.style.display = submenu.style.display === flex  none : flex
    }
  })
})
lt/scriptgt

  

6. Optimización y accesibilidad

• ARIA roles: Añade aria-haspopup=true y aria-expanded=false a los enlaces que despliegan el mega menú.
• Teclado: Asegúrate de gestionar focus/blur para usuarios de teclado.
• Carga diferida: Optimiza imágenes con atributos loading=lazy.
• Responsive: En móviles, convierte columnas en bloques apilados usando media queries.

7. Tabla de resumen de estilos CSS clave

Selector	Propiedad	Valor sugerido
.mega-dropdown	display	none / flex
.mega-column	flex	1
.nav-menu gt li	position	relative
.nav-menu a	color	#333

Recursos adicionales

• WordPress Navigation Menus (Developer Resources)
• Guía CSS de MDN
• ARIA Authoring Practices Guide

Conclusión

Crear un menú mega dropdown en WordPress sin recurrir a plugins es totalmente factible y ofrece beneficios de rendimiento, personalización y accesibilidad. Siguiendo estos pasos —registro del menú, marcado semántico, estilos CSS minimalistas y un toque de JavaScript— tendrás una navegación avanzada, profesional y ligera. ¡Manos a la obra y disfruta de un sitio más limpio y rápido!