Un menú dividido muestra distintos niveles de una única jerarquía de menú en dos posiciones de módulo separadas; por ejemplo, los elementos de nivel superior en una barra de navegación horizontal, con los elementos secundarios de cada sección apareciendo en una barra lateral que se actualiza dependiendo de qué elemento de nivel superior esté activo. Esto evita mantener menús separados y construidos a mano para la navegación superior y la barra lateral; Joomla los mantiene sincronizados automáticamente a partir de una única estructura de menú subyacente.

Requisitos previos

  • 1 Introducción al tutorial explica dónde ejecutar el tutorial e incluye los tutoriales requeridos de inicio de sesión de frontend/backend y de visualización del sitio (1.1, 1.2, 1.3).

Configuración

Crear los artículos

  1. Navegar a Contenido > Artículos y hacer clic en Nuevo. Resultado: Se abre un nuevo formulario de artículo.
    • Título: Café
    • Texto del artículo: Rico, tostado y totalmente personalizable; explore nuestras bebidas de café a continuación.
  2. Hacer clic en Guardar y nuevo.
    • Título: Espresso
    • Texto del artículo: Un concentrado de café, preparado bajo presión para obtener un sabor intenso y rico.
  3. Hacer clic en Guardar y nuevo.
    • Título: Latte
    • Texto del artículo: Espresso combinado con leche vaporizada y una ligera capa de espuma.
  4. Hacer clic en Guardar y nuevo.
    • Título: Té
    • Texto del artículo: Ligero, aromático y preparado al momento; explore nuestras variedades de té a continuación.
  5. Hacer clic en Guardar y nuevo.
    • Título: Té verde
    • Texto del artículo: Un té ligeramente oxidado con un sabor fresco y herbáceo.
  6. Hacer clic en Guardar y nuevo.
    • Título: Té negro
    • Texto del artículo: Un té completamente oxidado con un sabor intenso y robusto.
  7. Guardar y cerrar.

Pasos

Crear un menú de varios niveles

  1. Navegar a Menús > Menú principal y hacer clic en Nuevo. Resultado: Se abre un nuevo formulario de elemento del menú.
    • Título: Café
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Café
    • Elemento principal: - Sin elemento principal -

    Configuration of the main menu module
    Configuración del módulo de menú principal.
  2. Haga clic en Guardar y nuevo.
    • Título: Té
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Té
    • Elemento principal: - Sin principal -
  3. Haga clic en Guardar y nuevo.
    • Título: Espresso
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Espresso
    • Elemento principal: Café
  4. Haga clic en Guardar y nuevo.
    • Título: Latte
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Latte
    • Elemento principal: Café
  5. Haga clic en Guardar y nuevo.
    • Título: Té verde
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Té verde
    • Elemento principal: Té
  6. Haga clic en Guardar y nuevo.
    • Título: Té negro
    • Tipo de elemento del menú: Artículos > Artículo único
    • Seleccionar artículo: Té negro
    • Elemento principal: Té
  7. Guardar y cerrar.

Configurar el menú superior

Este módulo muestra solo los elementos de nivel superior (Café, Té) horizontalmente, ignorando sus hijos.

  1. Navegue a Contenido > Módulos del sitio y haga clic en Nuevo. Resultado: Aparece la ventana Seleccionar un tipo de módulo.
  2. Haga clic en Menú.
    • Título: Navegación principal - Superior
    • Seleccionar menú: Menú principal
    • Nivel de inicio: 1
    • Nivel final: 1
    • Elementos del submenú: Ocultar
    • Cargo: menu

    Top-level menu module configured with Start Level and End Level set to 1
    La configuración del módulo de menú de nivel superior
  3. Guardar y cerrar.

Configurar el submenú

Este módulo muestra los elementos secundarios de cualquiera que sea el elemento de nivel superior actualmente activo, actualizándose dinámicamente a medida que los visitantes se desplazan entre las secciones.

  1. Navegue hasta Contenido > Módulos del sitio y haga clic en Nuevo. Resultado: Aparece la ventana Seleccionar un tipo de módulo.
  2. Haga clic en Menú.
    • Título: Submenú de la barra lateral
    • Seleccionar menú: Menú principal
    • Elemento base: deje en blanco.
    • Nivel de inicio: 2
    • Nivel final: Todas
    • Elementos del submenú: Mostrar
    • Cargo: Barra lateral izquierda [sidebar-left]

    Configuration of the sub menu
    Configuración del submenú
  3. Guardar y cerrar.

Ver los resultados

  1. Vea el sitio y haga clic en Café en la navegación superior. Resultado: Aparece el artículo Café, y el submenú de la barra lateral muestra Espresso y Latte.
  2. Haga clic en Té en la navegación superior. Resultado: Aparece el artículo Té, y el submenú de la barra lateral se actualiza para mostrar Té verde y Té negro.
    Split menus in the frontend
    Menús divididos en el frontend

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.

Dividir menús Abrir en una pestaña nueva

Conceptos

Un menú dividido se basa en dos módulos de menú separados que apuntan al mismo menú subyacente, cada uno configurado para mostrar una porción diferente de él. La configuración de Nivel de inicio y Nivel final controla qué niveles de la jerarquía muestra un módulo; estableciendo ambos en 1 se muestran solo los elementos de nivel superior, mientras que un Nivel de inicio de 2 con un Nivel final de Todas muestra todos los niveles por debajo del superior.

Dejar en blanco el Elemento base hace que un módulo sea dinámico: en lugar de mostrar siempre los elementos secundarios de un elemento de menú fijo, muestra los elementos secundarios de cualquiera que sea la sección de nivel superior en la que se encuentre actualmente el visitante.

La asignación de menú puede utilizarse para ocultar el módulo secundario en páginas donde no sería aplicable, como la página de inicio, estableciéndolo en Solo en las páginas seleccionadas y eligiendo páginas específicas.