Menús y submenús dependientes en joomla

Cuando me refiero a menús dependientes en joomla, me refiero a que nos aparezcan diferentes submenús dependiendo de la opción de menú principal que hayamos escogido. Puede parecer una tarea muy sencilla,simplemente utilizando deferentes menús y módulos, pero vamos a aprender a realizar esto de una manera correcta.

Lo mejor para afrontar este post es realizar un ejemplo concreto de lo que queremos conseguir. Por ejemplo vamos a crear una web con un menú superior que contenga 3 items de menú:

  1. Inicio
  2. Cursos
  3. Animales

No tienen mucho que ver cursos y animales, pero es sólo un ejemplo ;). Al clicar sobre el menú cursos, vamos a ver un artículo explicatorio de nuestros cursos, pero en la columna izquierda, veremos un submenu, formado por los diferentes cursos de los que dispone nuestra web. Realizaremos el mismo efecto para los animales. Para lograr este efecto, lo primero a realizar es el menú superior. Asi que nos dirigimos a nuestro “Gestro de menús” y creamos uno. Como va a ser el principal, utilizaremos el menú principal que joomla nos ofrece por defecto. Nuestro menú debe quedar coomo el que se muestra a continuación:

Menú principal joomla

Dejo también una imagen del frontal de nuestro sitio web, para ver como va evolucionando el tutorial.

Menú principal frontal en joomla

De momento únicamente tenemos el menú principal colocado en la posición superior de nuestra plantilla tal y como queriamos. Es un buen comienzo ;). Disponemos de tres items de menú. El principal, o “Home” de nuestro portal web y los dos elementos que van a tener un submenu asociado. Nuestro menú principal está alojado en un módulo llamado “Main menú”. El siguiente paso natural es crear otro menú, diferente del primero, y asignarle un módulo propio, que podríamos mostror u ocultar en función de la página en la que estemos. El problema de esta aproximación, es que no estariamos respetando la estructura de la web. Es decir, si elegimos uno de los posibles cursos, no estaremos dentro del menú cursos, sino al mismo nivel. Y esto quedará patente, tanto en la URL de nuestro site, como en las “Migas de pan” del portal web.

Cómo crear los submenús en joomla

Para realizar los submenús en joomla, no podemos crear menús separados para cada nivel, ya que no estaríamos repetando la arquitectura de la página tal y cómo he comentado más arriba. La manera de prodecer es más sencilla de lo que pueda parecer. Únicamente debemos crear los items de menú en el mismo menú principal, cada uno dentro de su padre. Dejo un ejemplo de cómo va quedando mi menú.

Menú completo en joomla

El problema del sistema que vemos en la imagen superior lo comprobamos echando un vistazo al frontend de nuestro portal web. No sólo vemos los items principales “Inicio, Cursos, Animales” como teníamos previsto, sino además, al clickar sobre cursos, vemos también los submenús; hecho que queremos evitar. ¿Cómo solucionar este problema?

Mostrar los items de menú que queremos

En nuestro menú principal, los únicos elementos que queremos mostrar son los de nivel superior. Es decir, el primer nivel de items. Ya hemos comentado que nuestro menú principal se muestra en un módulo de tipo “Menú”. Es aquí, donde podemos indicar algunas opciones de visualización de nuestro menú. Asi que vamos al módulo “Main menú” y lo editamos. En la parte derecha disponemos de las siguientes opciones de configuración:

Configurar módulo menú en joomla

Cómo vemos en la imagen, tenemos cuatro opciones de configuración.

  1. Seleccionar menú: El menú que se va a mostrar dentro de éste módulo.
  2. Nivel inicial: Nivel a partir del cual se van a mostrar nuestro sitems de menú. En este caso elegimos 1; queremos empezar en el primer nivel.
  3. Nivel final: Nivel hasta el quye se va a mostrar, incluido. En nuestro caso elegimos 1; queremso sólo mostrar el primer nivel.
  4. Mostrar elementos del menú: La verdad no tengo muy clara está opción ;).

Con ésta configuración, ya tenemos el primer paso hecho. Es decir disponemos de un menú superior tal y cómo queriamos y además tenemos organizada nuestra información de una manera lógica.

Crear los submenús

El siguiente paso a realizar es la creación de los submenús que deben mostrarse en cada sección de nuestra web. En realidad, los submenús ya están creados, puesto que únicamente vamos a utilizar el principal. Lo que tenemos que hacer es algo muy parecido a lo que hemos hecho antes. Es decir, crear nuevos módulos y elegir que elementos de menú vamos a mostrar. Vamos a ponernos manos a la obra. Se me ocurren dos maneras de hacer este paso:

  • Crear un módulo para cada submenú
  • Crear un módulo para todos

En este ejemplo voy a optar por la segunda opción; ya que es más rápido. La ventaja que tendría la segunda, es la posibilidad de títulos de menú específicos de lo que estamos mostrando en nuestros sitio web.

Para crear el módulo debemos seguir los mismos pasos que antes. Vamos al gestor de módulos y creamos uno nuevo. Elegimos que sea de tipo “Menú”. En las opciones básicas, escojemos el “Main menú” y ponemos a 2 el nivel inicial y final. Seleccionamos la posición de la plantilla en la que queramos mostrarlo y aceptamos. En realidad, no hace falta andar ocultando y mostrando nuestro módulo, porque joomla sólo lo mostrará cuando deba hacerlo. Es decir sólo lo mostrará cuando esté módulo tenga contenido; además es sencillo para el CMS saber que contenido debe mostrar conociendo qué menú es el elegido. recordemos que nuestros menús realmente son hijos unos de otros.

Menús en joomla

Como se aprecia en la imagen, esté es el resultado final del artículo. Al clicar sobre el submenú cursos, se nos muetra un submenú con los cursos que tenemos. Además en las migas de pan tenemos la profundidad correcta, y también en la URL, aunque no podemos ver está última en la imagen ;).

Esta entrada fue publicada en BackEnd. Guarda el enlace permanente.

6 respuestas a Menús y submenús dependientes en joomla

  1. ANGEL GARCIA dijo:

    Muy buena la lección, realmente me ha ayudado y solucionado el problema que tenía en una web que estoy realizando. Cuando este publicada la web, la dirección url sera:
    http://www.decamultiserviciosferia.es/
    Gracias

  2. ANGEL GARCIA dijo:

    4 – Mostrar elementos del menú: La verdad no tengo muy clara está opción ;).
    Esta opción , cuando la activas y pones si, haces que los submenús, se visualicen, si la opción es no, no se despliegan los submenús.
    También va en consonancia con el punto 3, ya que según le indiquemos el nivel de submenus que queremos desplegar, el 2, 3, … así nos desplegará:
    EJ.
    MENU (1)
    SUBMENÚ (2)
    SUB-SUBMENÚ (3)
    SUB-SUB-SUBMENÚ (4)

    Y así sucesivamente.
    Espero haber podido poner mi granito de arena.

    Un saludo

  3. Elena dijo:

    Hola, necesito una ayudita con una web que estoy haciendo.
    El menú tiene varios elementos y algunos de ellos tienen submenús desplegables que se activan cuando pasar el cursor sobre ellos. Hasta aquí todo correcto.
    Mi problema es que cuando entro en uno de los elementos de menú (sin submenus) aparecen desplegados y fijos los elementos desplegables de los otros elementos de menú.
    No se si me he explicado claramente.

  4. Ricardo dijo:

    Hola, de que forma podría hacer que, algunos elementos del menu principal se muestren hasta el nivel 3 por ejemplo y los demás si solo hasta el nivel 2, no se si me haga entender, en el modulo configuro en nivel inicial 1 y nivel final 2, pero hay dos menus de todos los configurados que si necesito se muestren hasta el nivel 3, no se como lograr esto, pues solo veo la opción o de mostrar hasta el 2 o de mostrar todos hasta el 3. Te Agradezco enormemente si me puedes dar una luz en este tema o por donde buscar, pues le he cacharreado por todas partes y no veo la forma, Gracias }:)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s