Advertisement
  1. Code
  2. WordPress

Cómo crear un menú desplegable en WordPress

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

Los menús de navegación están teniendo están siendo en este momento un poco el centro de atención. Desde los menús de hamburguesa para móviles, los mega menús para tiendas hasta menús sticky para mejorar la experiencia de usuario, existe por ahí una excelente opción en la forma en la que puedes presentar tu menú de navegación en tu sitio de WordPress.

Pero, ¿qué pasa si deseas crear un sencillo menú con algunos elementos de nivel superior y algunos elementos más que se desplazan hacia abajo a partir de ellos cuando el usuario pasa el cursor sobre ellos?

Antes de empezar a codificar menús avanzados como mega menús y menús de hamburguesa, es una buena idea aprender a crear un menú desplegable. Este tipo de menús será útil en más sitios de los que puedas imaginar (no todos los sitios necesitan un menú sofisticado), y te dará la base que necesitas para, a partir de ahí, empezar a construir menús más avanzados.

En este tutorial, voy a mostrarte cómo crear un menú desplegable en tu tema de WordPress, usando CSS para apuntar al HTML que se genera mediante la función de menú de WordPress. Esto está diseñado para ser usado en un tema que estés codificando tú mismo, y no para un tema de terceros, que ya tendrá su propio menú. Sin embargo, si estás trabajando con un tema de terceros cuyo menú no sea desplegable y deseas añadirlo, tendrás que crear un tema hijo y añadirle el código de tu menú.

Lo que vas a necesitar

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

  • una instalación de desarrollo de WordPress
  • un tema que estés codificando tú mismo, o un tema hijo de un tema de terceros en el caso de que desees modificar el menú
  • un editor de código

La funcionalidad de menú integrada en WordPress

Lo primero que tendrás que entender es cómo genera WordPress los menús. A diferencia de lo que ocurre en los sitios estáticos, los menús de WordPress no están codificados de forma rígida en el sitio. En su lugar, WordPress utiliza una función PHP para consultar la base de datos y obtener elementos de menú de navegación, y luego mostrarlos en la estructura correcta.

Cada elemento del menú de navegación es en realidad una entrada en la tabla wp_posts de la base de datos, no una entrada normal, sino un tipo especial de entrada que se usa solo para los elementos del menú de navegación, con sus propios metadatos, incluido el texto que se mostrará y el destino del enlace.

En tu tema, abre el archivo header.php. Deberías ser capaz de encontrar esta línea:

Tu función puede parecer un poco diferente dependiendo de los parámetros, pero vamos a desglosar el ejemplo anterior y veamos qué hace cada elemento:

  • wp_nav_menu() es la función que captura un menú de navegación y lo genera.
  • A continuación, los parámetros se ajustan en una matriz (array).
  • container_class es la clase CSS que se aplicará al contenedor en el que estará envuelto el menú. En este caso, es main-nav. A eso es a lo que apuntaremos más adelante con nuestro CSS.
  • theme_location => primary le indica a WordPress que esta es la navegación principal. Si creaste un menú desde las pantallas de administración y marcaste la casilla Principal, este será el menú que se usará para este lugar en el código.

Es posible que en ocasiones desees añadir un menú de navegación en otra parte del tema, por ejemplo, en el pie de página, en cuyo caso no querrás utilizar theme_location => primary. Esto solo lo puedes usar para un menú. Pero es posible que desees utilizar parámetros adicionales, que puedes encontrar en la página del manual de WordPress sobre wp_nav_menu().

Aquí está la casilla de verificación para la navegación principal en la pantalla de administración de Menús:

The primary navigation checkbox in the Menus admin screen in WordPressThe primary navigation checkbox in the Menus admin screen in WordPressThe primary navigation checkbox in the Menus admin screen in WordPress

Salida del código mediante la función wp_nav_menu()

Antes de que podamos añadir CSS para crear el menú desplegable, resulta de gran ayuda estar familiarizado con el código que WordPress genera para los menús.

Este es un menú típico para una pequeña empresa, tal y como aparece en la pantalla de administración de Menús:

Menu in menus admin screen with top level items and second level itemsMenu in menus admin screen with top level items and second level itemsMenu in menus admin screen with top level items and second level items

Aquí está la salida HTML para ese menú:

Si examinas ese código, verás que consta de:

  • Un div con la clase main-nav, definido en la función wp_nav_menu().
  • Dentro de eso, un ul con el ID menu-navbar y la clase menu. Estos son los valores predeterminados definidos por WordPress.
  • Dentro de eso, una serie de elementos li, cada uno con la clase de elemento de menu-item menu-item-type-post_type más otras clases específicas para el tipo de entrada al que dirija el elemento de menú y el estado de ese elemento de menú en el momento. Cada uno también tiene un identificador único con un número correspondiente al ID del post del elemento de menú de navegación en la base de datos.
  • Dentro de uno de los elementos li hay otro ul con sus propios elementos li en su interior: los elementos de menú de segundo nivel. Esto es lo que queremos que aparezca cuando el usuario pase el cursor sobre el elemento de menú de nivel superior.

Codificación del CSS para crear el menú desplegable

Así que ahora sabemos lo que está siendo extraído por WordPress, y podemos determinar a qué elementos queremos apuntar con nuestro CSS.

Queremos lograr un par de cosas:

  • Cuando se abre la página, los elementos de menú de segundo nivel están ocultos.
  • Cuando el usuario pasa el cursor sobre un elemento de nivel superior, aparecen los elementos de segundo nivel situados bajo de él.

Ocultar los elementos de segundo nivel por defecto

En la hoja de estilos del tema, empieza ocultando los elementos de segundo nivel de forma predeterminada.

Añade esto:

Esto ocultará el elemento ul dentro de otro elemento ul dentro a su vez del elemento main-nav. Sin embargo, no ocultará un elemento ul de nivel superior, ya que requiere que una ul esté anidada dentro de otra ul del menú.

Ahora, si abres la página e intentas ver los elementos de segundo nivel, no será posible, estarán ocultos. Arreglemos esto.

Hacer que los elementos de segundo nivel aparezcan al situar el ratón sobre su elemento de nivel superior

Ahora tenemos que asegurarnos de que el ul anidado dentro del li de nivel superior se mostrará cuando se sitúe el ratón sobre este último li.

Añade esto a tu hoja de estilo:

Ahora, cuando pases el ratón sobre el elemento de nivel superior, aparecerá la lista bajo él. Pero descubrirás que no se muestra como quieres. Específicamente, va a empujar hacia abajo el contenido situado bajo el menú. Queremos que parezca como si estuviera flotando sobre el contenido. Para solucionar esto, necesitamos añadir un poco de estilo de diseño a nuestro elemento ul ul.

Añadir estilo de diseño a la lista de segundo nivel

Abre tu hoja de estilo y busca la línea en la que aparece display: none. Edita ese bloque para añadir estilo de diseño:

También debes proporcionar al elemento de lista de nivel superior un posicionamiento relativo:

Echemos un vistazo a lo que hace ese código:

  • position: absolute da a la lista de segundo nivel un posicionamiento absoluto, sacándolo del flujo de los elementos de la página. Para el elemento de nivel superior, position: relative coloca la lista de nivel superior en el flujo de la página y permite colocar un elemento posicionado de forma absoluta dentro de ella.
  • top: 3em coloca la parte superior de la lista en relación con la parte superior del elemento que lo contiene, es decir, el elemento de lista de nivel superior. Este valor 3em refleja la altura de la barra de navegación de nivel superior. Edita la tuya si la navegación de nivel superior tiene una altura distinta.
  • left: 0 coloca la lista a la izquierda, en relación con el elemento situado encima de él.
  • z-index: 99999 define dónde se encuentra el elemento en un modelo tridimensional de la página. Un valor alto de 99999 garantiza que se muestre encima de todo lo demás.
  • El código restante proporciona la anchura de la lista y también le añade estilo de visualización, incluida una sombra para que parezca que está en la parte superior de la página.

Ahora echemos un vistazo a lo que vemos cuando pasamos el ratón sobre el elemento de nivel superior:

¡Funciona! Cuando desplazo el cursor sobre el elemento de nivel superior, ahora sí se muestra el menú desplegable.

Los menús desplegables son útiles para menús pequeños de varios niveles

Cuando tu sitio necesite un menú con varios niveles, pero no muchos enlaces fuera de tu menú de nivel superior, un menú desplegable es la forma más sencilla de lograrlo. El sitio que he utilizado para esta demostración sólo tiene un elemento en su menú con otros elementos bajo él, y sólo son tres. Usar un mega menú sería exagerado, y un menú de un solo nivel no me permitiría mostrar todo lo que quiero.

Ser capaz de añadir un menú como este a tus temas te dará más flexibilidad con tus menús y mejorará la experiencia del usuario. Y puedes hacerlo con solo unas pocas líneas de CSS.

Mientras estás aquí, echa un vistazo a algunos de nuestros otros artículos sobre los menús de WordPress y la navegación.

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.