J3.x:Creating a submenu/es

Tutorial
Cómo Crear un Submenú en un Sitio Joomla!

Joomla! 

3.x

En Joomla, los submenús se pueden mostrar de dos formas: bajo dos o más niveles jerárquicos o como un menú modular completamente separado. Esto sirve para construir menús que muestren la jerarquía de navegación entre items (a nivel de padres e hijos), o para mostrar solamente items en un cierto subnivel del menú en una posición del template completamente separada del resto. Para mostrar como hacerlo, iremos creando paso a paso items de menú padres e hijos y veremos como visualizar estos items dentro de un solo gran menú jerárquico, o como un menú separado que solo muestre los items hijos en una posición separada del template.

Para empezar, funciones de menú con tres construcciones básicas:

• Artículos - necesitas contenido para enlazar. Pueden ser partes de un componente, otros items de menú, o enlaces externos.
• Menú - describe los elementos del menú, el tipo de navegación, su relación padre/hijo a otros elementos de menú y el orden en que se muestran.
• Módulo de Menú - controla la posición y visualización del menú.

Para este tutorial, comienza ingresando en Joomla como usuario administrador. Si no sabes como ingresar lee el siguiente artículo: Ingresando y saliendo del panel de administración de Joomla.

Nota: Para este tutorial necesitas permisos de super administrador o permisos suficientes para crear y modificar artículos, items de menú, y módulos. Para más información sobre Control de Acceso de Usuarios (ACL) lee: Tutorial ACL.

Paso 1 - Crea Tus Artículos

En nuestro ejemplo, vamos a crear items de menú de nivel superior para "Perros" y "Gatos". Bajo Perros, tendremos "Collies" y "Pomeranos". Bajo "Gatos" tendremos "Birmanos" y "Azul Ruso". Así que la estructura de nuestro ejemplo de items de menú será como sigue:

• Perros
  • Collies
  • Pomeranos
• Gatos
  • Birmanos
  • Azules Rusos

Primero, crea cuatro artículos para que podamos enlazar nuestos items de menú a ellos: "Collies", "Pomeranos", "Birmanos" y "Azules Rusos". Lee este tutorial si necesitas ayuda para crear un artículo: Añadir un nuevo artículo.

Paso 2 - Crea los Items de Menú de Nivel Superior

Para crear la estructura, necesitamos navegar al menú donde queremos que estén nuestros nuevos items. Si es un menú nuevo, necesitarás crearlo. Lee el tutorial sobre como crear un menú: Añadir un nuevo menú.

Una vez tengas tu menú localizado en el Gestor de Menús, añadirás los items de menú padres usando Enlaces del Sistema → Crear una URL para cada enlace de navegación: Perros y Gatos.

Nótese que hay otros tipos de items de menú que se pueden usar para el nivel padre de la estructura de navegación.

Aquí están los pasos para crear los Items de menú usados en nuestros datos de ejemplo. Para más información sobre creación de Menús lee: Añadir un nuevo menú.

1. Navegue hasta el Gestor de Menú haciendo clic en "Menús"' → "'Menú principal"'
   
2. En la barra de herramientas, clique sobre "Nuevo"
   
3. En este ejercicio, crearemos enlaces "contenedores" para los items de nivel superior "Perros" y "Gatos". En el panel "Detalles", clique sobre el botón "Seleccionar" un "Tipo de elemento del menú". En la ventana emergente que aparecerá, seleccionaremos posteriormente Enlaces del Sistema → Crear una URL.
   
4. Clique sobre "Enlaces del sistema", luego deslice hacia abajo y seleccione "Crear una URL".
   
5. Añade el Título de Menú y teclee una parrilla "#" en la caja del Enlace.
   
6. Guarda el Item de menú recién creado.
   
7. Repite los pasos 2 - 6 para el item de nivel superior "Gatos".

Paso 3 - Crea los Items de menú de nivel inferior

Ahora se añadirán los items de menú de nivel inferior seleccionando el Tipo de elemento Artículos → Mostrar un solo artículo para crear los enlaces a las páginas de "Collies", "Pomeranos", "Birmanos" y "Azules Rusos". Para cada item de menú creado, estableceremos el "Elemento principal" a "Perros" o "Gatos".

Para información más detallada sobre cómo agregar un elemento del menú que apunta a un Artículo, lea: Agregar un elemento del menú que apunta a un Artículo.

Nota: Hay otros tipos de items que se pueden usar para los subniveles de la estructura de navegación.

1. En la barra de herramientas, clique sobre "Nuevo".
   
2. En el nuevo Item de Menú, clique sobre el botón de selección de "Tipo de elemento del menú".
   
3. Seleccione Artículos → Mostrar un solo artículo de la lista mostrada.
   
4. De vuelta al panel de "Detalles" de nuevo Item de Menú, clique sobre "Seleccionar artículo" para acceder a la lista de artículos.
   
5. Seleccione el artículo "Collies" para este ejemplo.
   
6. De vuelta al panel de "Detalles" de nuevo Item de Menú, teclee un "Título del elemento del menú". A continuación clique sobre la lista de selección "Elemento principal" situada en la columna más a la derecha. Busque y seleccione el item superior "Perros", deslizándose sobre dicha lista. Nótese que el nivel de menú superior se indica mediante un único trazo "-", el segundo nivel con dos trazos "--", el tercero con tres "---" y así sucesivamente.
   
7. Clique sobre el botón "Guardar y cerrar" en la barra de herramientas de arriba.
   
8. Repita los pasos del 1 al 7 para los restantes artículos: "Pomeranos" con "Perros" como elemento principal y los artículos "Birmanos" y "Azules Rusos" con elemento principal "Gatos".
9. Cuando haya terminado con la sección de "Items de Menú", el gestor de Items del Menú debería tener un aspecto similar al siguiente:
   

Step 4 - Configurar el Módulo de Menú

En este momento, ya tenemos los artículos e items del menú hechos. Ahora necesitamos actualizar el "Módulo de Menú". En Joomla!, el Módulo del Menú determina tres aspectos importantes:

1. La apariencia del menú;
2. Dónde se mostrará dentro de la página;
3. En qué páginas se mostrará.

Realizaremos dos ejemplos:

• En el primer ejemplo configuraremos parámetros del módulo para mostrar el menú con los items de nivel superior y sus subniveles debajo.
• In the second example, we will add an additional menu module that appears in the left column and shows only the second level menu items.

Note: We will do both examples using the Protostar Template included in the core Joomla! installation.

Example 1 - One Menu Module With Second Level Menu Items

To show this as one module, follow these steps:

1. Navigate to Extensions → Module Manager and locate the Menu Module associated with your menu. If you need to create a new menu module, for instructions on creating a menu module, see: Module Menu
   File:J3x-Create-Sublevel-Menu-Module-Control-Panel-es.png
2. Click on the module name associated with your menu. In this tutorial, we are selecting Main Menu. Note: this image has been filtered by selecting Menu in the Module type dropdown.
   File:J3x-Create-Sublevel-Menu-Module-List-Menus-es.png
3. In the Module details, set the Start level to 1, the End Level to All and set Show Submenu Items to Yes.
   File:J3x-Create-Sublevel-Menu-Module-Details-es.png
4. For this tutorial, we have added some styling in the Advanced tab. In the Menu Class Suffix we have entered navbar-nav nav-pills. You can also add navbar-nav nav-tabs for a slightly different look. Note: there is a space before navbar-nav.
   File:J3x-Create-Sublevel-Menu-Module-Advanced-Menu-Class-Suffix-es.png
5. Click on Save & Close.
   File:J3x-Create-Sublevel-Menu-Module-Save-es.png
6. Go to the frontend of your site and your menu should look similar to this. In the Protostar Template, the sublevel menu items are displayed as dropdown menu items.
   File:J3x-Create-Sublevel-Menu-Frontend-Sample-Dropdown-es.png
7. The source code generated will look similar to this:

<ul class="nav menu navbar-nav nav-pills">
  <li class="item-101 current active"><a href="/" >Home</a></li>
  <li class="item-102"><a class="dropdown-toggle" href="/about-us" >About Us</a></li>
  <li class="item-210 deeper parent"><a href="#" >Dogs</a>
    <ul class="nav-child unstyled small">
      <li class="item-212"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
      <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
    </ul>
  </li>
  <li class="item-211 deeper parent"><a href="#" >Cats</a>
    <ul class="nav-child unstyled small">
      <li class="item-214"><a href="/2015-11-24-14-20-12/burmese" >Burmese </a></li>
      <li class="item-215"><a href="/2015-11-24-14-20-12/russian-blues" >Russian Blues</a></li>
    </ul>
  </li>
</ul>

Example 2 - A Second Menu Module With Child Level Menu Items

To show in a separate module in a different position, follow these steps:

1. Navigate to Extensions → Module Manager and locate or create a second Menu Module associated with your menu. If you are unfamiliar with how to create a new menu module, for instructions on creating a menu module, see: Module Menu
   File:J3x-Create-Sublevel-Menu-Module-Control-Panel-es.png
2. Click on the module name associated with your menu. In this tutorial, we are selecting Left Menu. Note: this image has been filtered by selecting Menu in the Module type dropdown.
   File:J3x-Create-Sublevel-Menu-Module-List-Menus-2-es.png
3. In the Module details, set the Start level to 2, the End Level to All and set Show Submenu Items to Yes. Note the position has changed and the menu we are pointing to is the Main Menu.
   File:J3x-Create-Sublevel-Menu-Module-Details-2-es.png
4. For this tutorial, we have used the Module Assignment tab and assigned this Menu Module to appear on all pages except the home page.
   File:J3x-Create-Sublevel-Menu-Module-Module-Assignment-Tab-es.png
5. Click on Save & Close.
   File:J3x-Create-Sublevel-Menu-Module-Save-es.png
6. Go to the frontend of your site and navigate to the Collies article. Your menu should look similar to this. Notice the child level subitems are the only items showing.
   File:J3x-Create-Sublevel-Menu-Frontend-Sample-Child-Menu-es.png
7. The source code generated will look similar to this:

<ul class="nav menu">
  <li class="item-212 current active"><a href="/2015-11-24-14-19-31/collies" >Collies</a></li>
  <li class="item-213"><a href="/2015-11-24-14-19-31/pomeranians" >Pomeranians</a></li>
</ul>

Sub-Sub-Menús

Using this same technique, it is easy to create third-level sub-menus. You just make the Parent Menu Item a second-level sub-menu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the third-level Menu Items.