Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Una manera fácil de crear un mega menú en WordPress con código

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product image
What You'll Be Creating

En un artículo anterior, expliqué cómo decidir en qué situaciones es adecuado colocar un mega menú en tu sitio web y cómo utilizar un plugin para crearlo.

Pero si te sientes más ambicioso, es posible que prefieras crear con código tu propio mega menú para tu tema. Esto te proporciona la ventaja de poder diseñarlo como prefieras, y asegurarte de que sea coherente con tu tema.

En este tutorial, te mostraré cómo codificar un mega menú y cómo añadirlo a tu tema.

Lo que necesitarás

Para continuar con este tutorial, necesitarás lo siguiente:

  • Una instalación de desarrollo de WordPress (no añadas esto a tu sitio público hasta que todo funcione correctamente).
  • Un tema propio que puedas editar, o si estás usando un tema de terceros, un tema hijo para este.
  • Un editor de código.

Estoy usando un tema de terceros (ColorMag), así que voy a crear un tema hijo para él en el cual añadiré mi propio estilo.

Cómo funciona el mega menú

Nuestro mega menú tomará la salida de código del sistema de menús de WordPress y lo mostrará en forma de mega menú. No voy a añadir un menú extra al sitio: podrías hacerlo si quieres, pero como este mega menú no funcionaría en pantallas más pequeñas, yo prefiero continuar usando el mismo menú. Esto se debe a que me gusta ofrecer la misma navegación tanto a los usuarios que acceden a través del móvil como a los que acceden desde un ordenador de escritorio.

Al mega menú se le aplicará un estilo que solo funcionará en las pantallas más grandes. Para las pantallas más pequeñas, recomiendo usar un menú de hamburguesa, que quedará oculto hasta que el usuario de un toque sobre el icono en forma de hamburguesa (tres líneas horizontales). Puedes averiguar cómo crear un menú de hamburguesa con código en nuestro tutorial sobre la codificación de un menú de hamburguesa.

Primeros pasos

El primer paso consiste en añadir un montón de elementos de menú a tu menú. Esto significa que tendrás un montón de contenido con el que llenar tu mega menú.

He añadido un montón de enlaces a mi menú, con tres niveles de navegación. Cuando el usuario pase el cursor sobre un elemento de menú de nivel superior, los elementos de nivel inferior dentro de él aparecerán en un mega menú. En este momento, aparecen con el diseño estándar:

a menu in WordPress with three levels of links Each level appears when the user hovers over the link above it in the structure

Comencemos por identificar el código que muestra este menú en el front-end del sitio. Aquí está el código (editado) para mi menú. He sacado algunos de los elementos li y eliminado la mayoría de las clases CSS para que pueda ver la estructura del HTML:

Aquí hay mucho código, pero te recomiendo que te tomes un momento para estudiarlo ya que nos ayuda a identificar las clases y los elementos (y subelementos) que necesitaremos apuntar con CSS para crear nuestro mega menú.

Podemos usar las clases CSS generadas por WordPress para dar estilo a nuestro mega menú y asegurarnos de que esté bien diseñado. Usaremos una media query ("consulta de medios") para asegurarnos de que el menú solo aparecerá en pantallas lo suficientemente grandes.

Los elementos específicos que modificaremos con CSS son:

  • .main-navigation
  • Elementos ul bajo el anterior (incluyendo ul ul y ul ul ul)
  • Elementos li y a dentro de los elementos ul.

En pantallas más pequeñas, haré visible el menú predeterminado, aunque recomiendo usar una alternativa móvil como un menú de hamburguesa para pantallas muy pequeñas. El código de mi tema ya contiene un menú de hamburguesa para pantallas pequeñas, así que no tengo que preocuparme por esto.

Nota: la salida HTML de tu tema será similar a la mía, ya que es generada por el propio WordPress. Pero habrá diferencias, como la clase o el identificador del elemento de navegación principal. Vale la pena comprobarlo primero, sólo para estar seguros.

Configurar la media query

El primer paso consiste en añadir una media query o "consulta de medios" para el estilo del mega menú (en caso de que lo necesites). En la hoja de estilos de tu tema, añade esto:

Puedes cambiar el valor min-width a lo que funcione en tu tema y se corresponda a las media queries ya presentes en él para cualquier menú de hamburguesa.

Aplicar estilo al diseño

Mi actual menú tiene un estilo para que los elementos de tercer nivel solo se muestren cuando se pasa el cursor sobre el elemento de segundo nivel inmediatamente superior a ellos. Quiero cambiar esto para que aparezcan todos los elementos del menú. A continuación, les aplicaré estilos para que estén correctamente colocados.

Comencemos por hacer visibles los elementos de menú de segundo y tercer nivel cuando el usuario pase el cursor sobre el elemento de nivel superior.

Añade esto a tu hoja de estilo, dentro de la media query:

Ahora, cuando actualices la página y pases el cursor sobre un elemento de menú, tendrá más o menos este aspecto:

second and third level items are visible but a mess

Los elementos de segundo y tercer nivel son visibles, pero aparecen muy desordenados, por decirlo suavemente. Arreglemos esto.

Lo haremos en primer lugar haciendo que el elemento li bajo cada elemento de nivel superior tenga un ancho completo. Para que esto funcione, tendremos que eliminar cualquier posicionamiento relativo o absoluto en sus elementos superiores y lo haremos convirtiéndolos en elementos estáticos. También añadiremos display:inherit para asegurarnos de que los elementos de menú de nivel inferior estén visibles cuando situemos el cursor sobre el elemento de nivel superior.

Añade esto en tu hoja de estilo:

El menú ahora tiene este aspecto:

Es de ancho completo, pero tenemos que hacer algo para mejorar el diseño. Vamos a añadir un float a las listas de segundo nivel para que aparezcan una junto a otra.

Añade esto a tu hoja de estilo:

Ahora el menú tiene mejor aspecto:

menu with second level lists floated to the left

El float está funcionando, pero el color de fondo no está presente. Edita el estilo del elemento .main-navigation ul li:hover ul para añadir un estilo de fondo. El color concreto que utilices dependerá de lo que se esté usando en tu tema.

Ahora el menú se ve mejor:

the mega menu with a gray background

Vamos a añadir un poco de color y estilo de maquetación a las listas individuales, para que los elementos de segundo nivel queden más destacados. Añade esto en tu hoja de estilo:

Esto hace que las listas se vean mejor, con elementos de segundo nivel subrayados y en rojo. Siéntete libre de modificar estos colores para adaptarlos a tu tema.

second level items are now red and underlined

Por último, vamos a eliminar el margen superior de los elementos de tercer nivel de manera que queden mejor y más estrechamente agrupados. Edita el código de su estilo de la siguiente manera:

Ahora el menú tiene un aspecto mucho más ordenado:

the final mega menu with lists neatly laid out next to each otther

Ahora tenemos un mega menú en funcionamiento que utiliza el menú de navegación principal de nuestro tema.

No necesitas un plugin para crear un sencillo mega menú

Si quieres crear un sencillo mega menú usando el contenido del menú de navegación de WordPress, esta técnica te permitirá añadir uno en tu tema sin demasiado código adicional.

Sin embargo, si deseas añadir características extra como estilo personalizado e imágenes, probablemente lo conseguirá más rápidamente usando un plugin. Seguro que encontrarás uno que satisfaga tus necesidades en nuestra colección de mejores plugins para mega menús.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.