Un Menú es un contenedor que guarda una lista de elementos del menú, como enlaces a artículos. Un módulo de menú se usa para mostrar menús en un sitio web. Los submenús son menús en los que los elementos del menú se organizan en una jerarquía. En este tutorial crearemos artículos para diferentes perros y gatos y enlazaremos a ellos usando un menú que contiene una jerarquía de elementos del menú.

Requisitos previos

  • 1 Introducción al tutorial cubre dónde ejecutar su tutorial, e incluye los tutoriales necesarios de inicio de sesión en el sitio/administración y de visualización del sitio (1.1, 1.2, 1.3).

Configuración

Crear los artículos

Cree siete artículos simples, cada uno solo con un título.

  1. Haga clic en Contenido > Artículos, luego haga clic en Nuevo. Resultado: Aparece un formulario de nuevo artículo.
  2. Introduzca el Título del artículo, luego haga clic en Guardar y nuevo (una opción bajo el botón Guardar y cerrar) para guardarlo y abrir un nuevo formulario en blanco. Repita para los siete títulos:
    • Animales
    • Perros
    • Collies
    • Pomerania
    • Gatos
    • Birmanos
    • Azul ruso
  3. Después de introducir el último artículo, haga clic en Guardar y cerrar para volver a la lista de artículos. Resultado: Los siete artículos aparecen en la lista.
List of 7 articles
Lista de artículos

Crear un menú

  1. Navegue a Menús → Gestionar y haga clic en Nuevo. Resultado: Aparece el formulario Nuevo menú.
    • Título: Animales
    • Nombre único: animal-menu
  2. Guardar y cerrar

El menú Animales ahora aparece bajo Menús > Sitio a la izquierda. Haga clic en Animales. Resultado: Se muestra una lista vacía de elementos del menú.

Agregar elementos del menú

  1. Haga clic en Nuevo. Resultado: Aparece un formulario de nuevo elemento del menú.
    • Título: Animales
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Animales
  2. Haga clic en Guardar y nuevo
    • Título: Gatos
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Gatos
    • Elemento principal: Animales
  3. Haga clic en Guardar y nuevo
    • Título: Perros
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Perros
    • Elemento principal: Animales
  4. Haga clic en Guardar y nuevo
    • Título: Birmanos
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Birmanos
    • Elemento principal: Gatos
  5. Haga clic en Guardar y nuevo
    • Título: Azul ruso
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Azul ruso
    • Elemento principal: Gatos
  6. Haga clic en Guardar y nuevo
    • Título: Collies
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Collies
    • Elemento principal: Perros
  7. Clic en Guardar y nuevo
    • Título: Pomeranias
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Pomeranias
    • Elemento principal: Perros
  8. Clic en Guardar y cerrar.

Ahora tenemos un menú con elementos del menú enlazados a nuestros artículos, organizados de forma jerárquica — Perros y Gatos bajo Animales, y cada raza bajo su respectivo encabezado. A continuación crearemos módulos de menú para que el menú aparezca en el sitio público.

List of menu items in a hierarchy
La lista de elementos del menú aparece de forma jerárquica en el menú Animales

Pasos

Crear módulos de menú

Crearemos cuatro módulos de sitio para mostrar cuatro vistas diferentes del menú:

  • Todos los animales: aparece en la página de inicio con una lista completa de enlaces a todo el menú Animales.
  • Animales: aparece junto con el artículo Animales, mostrando enlaces solo a Gatos y Perros.
  • Perros: contiene solo razas de perros y aparece solo en artículos sobre perros.
  • Gatos: contiene solo razas de gatos y aparece solo en artículos sobre gatos.
  1. Vaya a Contenido > Módulos del sitio. Puede que vea módulos de sitio para Ruta de navegación, Menú principal, y Formulario de inicio de sesión. Estos son estándar en una nueva instalación de Joomla y aparecen en la página de inicio.
  2. Clic en Nuevo.
    • Seleccionar tipo de módulo: Menú
    • Título: Todos los animales
    • Seleccionar menú: Animales
    • Elemento base: Animales
    • Nivel de inicio: 1
    • Nivel final: Todas
    • Cargo: Barra lateral izquierda
    • Clic en Asignación de menú:
      • Asignación de módulo: Solo en las páginas seleccionadas
      • Clic en Nada para borrar las casillas de verificación, luego marque: Inicio
  3. Clic en Guardar y nuevo.
    • Seleccionar tipo de módulo: Menú
    • Título: Animales
    • Seleccionar menú: Animales
    • Elemento base: Animales
    • Nivel de inicio: 2
    • Nivel final: 2 (Gatos y Perros serán los únicos elementos mostrados)
    • Cargo: Barra lateral izquierda
    • Clic en Asignación de menú:
      • Asignación de módulo: Solo en las páginas seleccionadas
      • Clic en Nada para borrar las casillas de verificación, luego marque: Animales > Animales, Menú principal > Animales
  4. Clic en Guardar y nuevo.
    • Seleccionar tipo de módulo: Menú
    • Título: Perros
    • Seleccionar menú: Animales
    • Elemento base: Perros
    • Nivel de inicio: 3
    • Nivel final: Todas
    • Cargo: Barra lateral izquierda
    • Haga clic en Asignación de menú:
      • Asignación de módulo: Solo en las páginas seleccionadas
      • Haga clic en Nada para borrar las casillas de verificación, luego haga clic en la flecha desplegable a la derecha de Dogs y elija Seleccionar. Esto selecciona Dogs, Collies y Pomeranians.
    Menu assignment showing dogs, collies, and pomeranians checked
    Asignación de menú para Dogs
  5. Haga clic en Guardar y nuevo.
    • Seleccionar tipo de módulo: Menú
    • Título: Cats
    • Seleccionar menú: Animals
    • Elemento base: Cats
    • Nivel de inicio: 3
    • Nivel final: Todas
    • Cargo: Barra lateral izquierda
    • Haga clic en Asignación de menú:
      • Asignación de módulo: Solo en las páginas seleccionadas
      • Haga clic en Nada para borrar las casillas de verificación, luego haga clic en la flecha desplegable a la derecha de Cats y elija Seleccionar. Cats, Burmese y Azul ruso deberían quedar todas marcadas.
    • Haga clic en Guardar y cerrar.
List of site modules
Lista de módulos de sitio

Ver los resultados

  1. Vea el sitio. Resultado: El módulo All Animals aparece en la barra lateral izquierda de la página principal, mostrando el menú completo de Animals.
    The All Animals menu on the homepage
    El menú All Animals en la página principal junto con los demás módulos de sitio de menú (Main, Login y Rutas de navegación debajo del anuncio).
  2. Haga clic en Animals. Resultado: El artículo Animals aparece a la derecha, con el módulo Animals en la barra lateral izquierda mostrando enlaces a Dogs y Cats.
    Animals menu displaying links for Dogs and Cats
    El módulo de sitio de menú Animals con el artículo Animals está configurado para simplificar las opciones del menú.
  3. Haga clic en Dogs. Resultado: El artículo Dogs aparece a la derecha, con el módulo Dogs en la barra lateral izquierda mostrando enlaces a Collies y Pomeranians.
  4. Haga clic en Cats. Resultado: El artículo Cats aparece a la derecha, con el módulo Cats en la barra lateral izquierda mostrando enlaces a Burmese y Russian Blues.
    Cats menu module showing links to the breeds of cats. The breadcrumb menu at the top provides navigation back up the hierarchy.
    Todos los artículos relacionados con gatos muestran el menú Cats. El menú de rutas de navegación proporciona navegación hacia atrás en la jerarquía.
  5. Haga clic en Pomeranians. Resultado: El artículo Pomeranians aparece a la derecha con el módulo Dogs a la izquierda. Nota: El menú de rutas de navegación sobre el artículo enlaza de nuevo a Dogs, Animals y Home.

Creamos siete artículos para que nuestro menú enlazara con ellos, luego creamos el menú como un contenedor vacío. Añadimos elementos del menú al menú en una jerarquía estableciendo el principal de cada elemento. Finalmente, creamos cuatro módulos de menú de sitio para mostrar el menú en el sitio web de diferentes maneras: un menú que lo incluye todo en la página de inicio, y menús sensibles al contexto que muestran enlaces relevantes para las secciones Animals, Dogs y Cats.

Inicia el recorrido guiado de este tutorial

Haz este tutorial paso a paso en un Joomla Playground: un sitio Joomla que funciona en tu navegador.
Iniciarlo tarda unos segundos, como mucho medio minuto.

Submenús Abrir en una pestaña nueva

Conceptos

Un único menú contiene elementos de submenú organizados en una jerarquía, y se utiliza para mostrar varios submenús apropiados al contexto en el sitio web. Esto puede ser especialmente útil con jerarquías grandes que contienen muchos elementos del menú.

Los menús desplegables grandes pueden resultar confusos y difíciles de recorrer. El uso de submenús puede simplificar la navegación mientras se utiliza un único menú grande y complejo.