Crear un menú desplegable en el menú horizontal

Tienes la posibilidad de crear un menú desplegable en el menú horizontal de la parte de arriba de tu página web para que al pasar el ratón por encima aparezca una lista con las categorías, subcategorías o elementos de un módulo.

Puedes utilizarlo para el módulo Páginas pero también para otros módulos. Antes de leer este tutorial, es importante conocer cómo funciona el menú horizontal.

¿Qué añadir en un menú desplegable?

En un menú desplegable puedes incluir:

  • La lista de categorías y subcategorías de un módulo (por ejemplo, la lista de categorías del módulo Páginas o del Blog)
  • La lista de categorías y de elementos incluidos en una categoría (por ejemplo la lista de páginas de una categoría)

El menú desplegable puede por tanto funcionar en dos niveles (mostrar las páginas de una categoría cuando se pasa el ratón por encima del nombre de la categoría) o en tres niveles (mostrar por ejemplo las páginas de una subcategoría). Veamos las aplicaciones del menú desplegable con ejemplos concretos.

Desplegable 1

Desplegable 2

Un menú desplegable en dos niveles

Puedes mostrar por ejemplo la lista de páginas de una categoría, o la lista de categorías de un módulo.

Un menú desplegable en 3 niveles

Puedes hacer aparecer la lista de páginas de una subcategoría al pasar el ratón por encima, o la lista de páginas de las categorías de un módulo.

Incluir la lista de categorías de un módulo

Ejemplo: Un restaurante presenta su carta con diferentes categorías de páginas (los entrantes, los segundos, los postres). Vamos a añadir la carta en el menú horizontal de arriba y crear los menús desplegables con las categorías cuando se pasa el ratón por encima del título "La Carta".

  • Dirígete a Configuración > Menús, y haz clic en Editar, debajo del Menú horizontal de arriba.
  • Haz clic en el botón Añadir un enlace al menú.
  • Selecciona el tipo de enlace Enlace interno con destino a una Categoría de un módulo.
  • Selecciona el módulo elegido (Páginas en nuestro ejemplo).
  • Elige la categoría (en nuestro ejemplo es Páginas puesto que queremos mostrar la lista de todas las categorias que se encuentran en la raíz del módulo Páginas).
  • Marca la casilla Menú desplegable.
  • Debajo, selecciona lo que quieres que forme el menú desplegable (en el ejemplo, hemos marcado la casilla Mostrar la lista de categorías de esta categoría para presentar todas las categorías de páginas (entrantes, segundos y postres)).
  • Tienes la posibilidad de cambiar el título del enlace haciendo clic en el candado de la derecha. Nostros lo hemos nombrado La Carta en lugar de Páginas.

Importante: Puedes utilizar esta opción para todos los módulos que permiten crear categorías. Puedes por ejemplo mostrar la lista de categorías de la tienda online en un menú desplegable, las categorías del blog o las categorías del álbum de fotos.

Desplegable 3

Desplegable 4

Incluir la lista de elementos de una categoría

Ejemplo: Un restaurante presenta su carta ordenada en diferentes categorías (entrantes, segundos, postres). Vamos a añadir en el menú la lista de todos los entrantes, todos los segundos y todos los postres. Para ello añadimos al menú horizontal 3 enlaces y al pasar el ratón por encima de cada apartado aparecerán los elementos que lo componen).

  • Dirígete a Configuración > Menús y haz clic en Editar, situado debajo de Menú horizontal de arriba.
  • Haz clic en el botón Añadir un enlace al menú.
  • Selecciona Enlace interno con destino a la Categoría de un módulo.
  • Indica el módulo (Páginas en nuestro ejemplo).
  • Selecciona la categoría (para empezar en nuestro ejemplo sería la categoría Entrantes, después habría que hacer los mismo con Segundos y Postres).
  • Marca la casilla de Menú desplegable.
  • Debajo, selecciona lo que quieres que aparezca en el menú desplegable (en el ejemplo hemos marcado la casilla Mostrar la lista de elementos de esta categoría).

Importante: puedes hacer esto con las páginas de contenido pero también con los elementos de otros módulos. Puedes por ejemplo mostrar la lista de categorías de la tienda online en un menú desplegable, las categorías del blog o las categorías del álbum de fotos.

Desplegable 5

Desplegable 6

Incluir la lista de elementos de una subcategoría

También puedes hacer que aparezcan las categorías y los elementos al pasar el ratón por encima del menú horizontal. Volviendo a nuestro ejemplo, imaginemos que el restaurante propone entrantes fríos y calientes. En este caso debemos crear dos subcategorías dentro de la categoría Entrantes, con sus respectivas páginas de contenido. De esta manera, al pasar el ratón por encima del enlace Entrantes del menú horizontal, aparecerán las subcategorías Fríos y Calientes y se podrán ver los elementos de cada subcategoría.

  • Drígete a Configuración > Menús y haz clic en Editar, debajo de Menú horizontal de arriba.
  • Haz clic en Añadir un enlace al menú.
  • Selecciona el tipo de enlace Enlace interno con destino a la Categoría de un módulo.
  • Selecciona el módulo deseado (en nuestro ejemplo el módulo Páginas).
  • Elige la categoría (en primer lugar los Entrantes, después deberás hacer lo mismo con Segundos y Postres).
  • Marca la casilla Menú desplegable.
  • Debajo, selecciona lo que quieres que forme el menú desplegable (en nuestro ejemplo del restaurante hemos marcado Mostrar la lista de categorías de esta categoría y Mostrar la lista de elementos de esta categoría).

Importante: puedes hacer esto con las páginas de contenido pero también con los elementos de otros módulos. Puedes por ejemplo mostrar la lista de categorías de la tienda online en un menú desplegable, las categorías del blog o las categorías del álbum de fotos.

Desplegable 7

Desplegable 8