Cómo añadir un menú expandible a Joomla
Al crear un menú expandible obtendrás un website más elegante
En este tutorial te explicaremos como añadir un menú expandible a Joomla en pocos pasos. Lo que dentro de Joomla se conoce como «Menú extendido» te permite evitar menús con un tamaño desorbitado.
1) El módulo Extended Menú
Lo primero es acceder a los repositorios oficiales de extensiones de Joomla y descargar e instalar el módulo «Extended Menú». Si necesitas más información de cómo instalar una extensión puedes consultar nuestras guías. Puedes buscarlo aquí: http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/tree-menus
2) Configurar el Menú expandible
Entra en Extensiones/Module Manager y busca y entra en el módulo «Extended Menu». Ahora tienes que configurar varios apartados, como:
- El menú que quieres que se expanda. Por lo que el menú deberá estar creado previamente, aunque este vacío. Lo más normal para un menú expandible es usar el menú «Top Menu», es decir el horizontal superior, aunque dependerá del template que uses.
- Cómo quieres que se expanda. Te recomendamos que vayas probando a ver cual te gusta más.
- Y sobre todo donde quieres que aparezca. Recuerda: top, left, right…. dependerá de tu template, aunque si es el menú «Top Menu», lo normal es que ya esté bien situado.
3) Estructura tu menú
Si no lo hemos hecho antes deberemos entrar en el gestor de menús y crear una estructura para nuestro menú. No vamos a entrar en detalles de estos pasos porque se trataría de otro artículo, pero os indicaré los pasos básicos.
- Entrar en Menús/»Vuestro menú a expandir», que en general será «Top Menu».
- Aparecerán los objetos que vais a ver en horizontal. Son los objetos expandibles.
- Ahora debéis crear nuevos elementos que queréis expandir. Vais a «nuevo» y vais añadiendo enlaces a artículos, secciones, etc..
- Lo más importante, y sin lo cual nada va a funcionar, es que en el apartado «Parent menu» de este nuevo objeto debéis indicar de donde queréis que cuelgue el nuevo objeto. Es decir, si en el menú superior tenéis por ejemplo «Ropa, Calzado, Complementos» y creáis un enlace a la categoría «Cinturones», deberéis indicar que el Parent menu es «Complementos». Podéis hacer la estructura todo lo compleja que queráis, pero no mareéis a los usuarios.
4) Modificar el CSS de vuestra web
El último paso para añadir un menú expandible a Joomla es modificar la hoja de estilos CSS de vuestro website. No es imprescindible pero es muy posible que no os guste el estilo del menú por defecto de Joomla. Basta con entrar en vuestro template por FTP y abrir el css, normalmente será el archivo «template.css». Hay muchos ejemplos por la red y podéis probar cual os gusta más. Añadir por ejemplo estas lineas al final del archivo y guardar.
ul#menulist_root li ul {
display:none;
}
ul#menulist_root li:hover ul{
display:block;
background:none;
}
ul#menulist_root li ul li{
background:#000000;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
clear:both;
}
ul#menulist_root li ul li a{
background:none;
width:66px;
}
ul#menulist_root li ul li a:hover{
color:#AA0000;
background:none;
}
Dicho y hecho, refresca tu website y podrás ver los cambios.
