The Joomla! Community Magazine™

Override del mes: Metamorfosis al mod_menu

Escrito por | Tuesday, 01 April 2014 04:47 | Publicado en Abril 2014
Siguiendo los overrides: Esa manera práctica y divertida de “cambiarle la máscara” a nuestro joomla. En esta ocasión vamos a darle vida a nuestro módulo de menú haciéndolo acordeón. ¡Fácil, rápido y genial!

Increíble que una pequeña transformación puede lograr algo tan simple, y tan asombroso. Pensemos en una oruga: adelgaza un poco, le salen alas, antenas y ¡voilà! una mariposa.

Así de increíble, aunque mucho menos compleja, puede ser la transformación que le puedes dar a tu sitio con un simple override. Y no es que joomla sea comparable a un gusano (para muchos repugnante y para otros objeto de interés XD ), pero lo comparo, porque tiene todo el potencial de convertirse en cualquier tipo de sitio por complejo que parezca.

Más que un tutorial de cómo hacer un override, este artículo, igual que todos los subsecuentes de esta sección, se centrarán sólo en “arreglar” el override.

Para más referencias sobre cómo crear los overrides a módulos y sus vistas alternativas, consulta el primer artículo de esta serie en el siguiente link:

http://magazine.joomla.org/es/ediciones-anteriores/marzo-2014/item/1811-override-del-mes-presentaciones-alternativas-infinitas-posibilidades

Para este ejercicio usaremos la plantilla "protostar" en J! 3.2

Realiza el override del mod_menu, y opcionalmente crea una vista alternativa. Como puedes observar al realizar el override hay unos 5 archivos. Para crear la vista alternativa tendrías que copiar y renombrar (por ejemplo a ‘acordeon’) primero el archivo “default.php” y cualquier otro que vayas a modificar (Por ejemplo "acordeon_component.php") . En nuestro caso solo modificaremos el archivo default, así que será el único que copiaremos y renombraremos… Tu nueva estructura de archivos quedaría como sigue:

 imagen1

Vamos a observar un poco: Si creas un menú en tu web y analizas un poco el código que te devuelve, notarás que por default el menú se crea usando la etiqueta html '<ul>' y por defecto se agregan las clases "nav menu". Lo que haremos es cambiar la línea que genera esas clases y agregar la nuestra: "acordeon"

Edita el archivo "acordeon.php" y cambia la línea:

<ul class="nav menu<?php echo $class_sfx;?>"<?php

por:

<ul class="acordeon"<?php

imagen2


La mitad del trabajo está hecho. Ahora el CSS. Editamos el archivo css/template.css y vamos al final para pegar el siguiente código:

Ovserva que colocamos la clase "acordeon" a nuestra etiqueta <ul> en el paso anterior.. pues ahora hay que darle estilo a dicha clase y a todo lo que esté dentro de ella ( <li>,<a>,<ul>,etc)

Comenzamos dándo estilos a la lista principal (<ul class="acordeon">):

.acordeon{
padding:0;
list-style:none;
width:100%;
font-size:18px;
background:#c1c1c1;
border: 1px solid rgba(0,0,0,0.8);
margin:0px;
}

Ahora le daremos estilos a los links (<a>) que estén dentro de cada item de la lista (<li>):

.acordeon li a{
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.2);
border-top: 1px solid rgba(255,255,255, 0.2);
background:#3e3f44;
text-decoration:none;
color:#FFF;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
filter: dropshadow(color=#000, offx=1, offy=0);
padding:10px;
padding-left:20px;
}

Lo siguiente le dará estilo a los links (<a>) de cada item de menú (<li>) que esté dentro de una lista (<ul>), a su vez, dentro de otro item (<li>). ¿Complicado? No. Lo que hace el siguiente css es darle estilo a los item de cada submenú:

.acordeon li ul li a{
font-size:14px;
color:#47689d;
text-shadow: 1px 0px 1px rgba(255,255,255,0.5);

}

¿Cómo queremos que actúen los links (<a>) cuando pasemos el mouse sobre cada item de menú? Lo definimos utilizando "hover":

.acordeon li a:hover{
background:#4a6ba2;
-moz-transition: background 0.3s ease-in;//transiciones para que se vea animado!
-webkit-transition: background 0.3s ease-in;
-o-transition: background 0.3s ease-in;
}

Ahora modificamos las listas que estén dentro de nuestra lista! XD.. las listas "hijo" por así decirlo: sublistas. Como podrás observar, las listas (<ul>) que estén dentro de nuestra lista principal (con la clase "acordeon") estarán ocultos. En este caso lo logramos indicando que el alto (height) sea de cero y utilizamos "overflow:hidden" para evitar que el contenido se "salga" de su lugar. 

.acordeon ul{
margin:0; 
padding:0;
list-style:none;
height:0;
overflow: hidden;
transition:1s;
-moz-transition:1s; //transiciones para que se vea animado!
-webkit-transition:1s;
}

Ahora necesitamos que al pasar el mouse por cada item (<li>) de nuestra lista principal "acordeon", se muestre la lista (<ul>) que dejamos oculta en el paso anterior. 

.acordeon li:hover ul{
height:130px; //modifica este valor según tus necesidades. Puedes poner auto en lugar de un alto fijo, pero en algunos navegadores perderás la animación
overflow-y:auto; //esto agregará una barra de desplazamiento en caso de que la cantidad de items supere el alto de nuestra lista
overflow-x:hidden; //esto evitará que el contenido de nuestra lista se "salga" de la misma. 
}

Terminamos dando estilo a los links (<a>) de cada subitem de menú: 

.acordeon ul li a{
background:#fafafa;
}

.acordeon ul li a:hover {
background: none repeat scroll 0 0 #ccc;
color: #fff;
-moz-transition: color 0.4s ease;
-webkit-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
}

Lo último será ir a la configuración de nuestro módulo y seleccionar la vista alternativa "acordeon" para obtener algo como lo que sigue:

imagen3

Pasa el mouse sobre cada iten y verás abrirse cada submenú.

Hasta aquí llegamos. Espero que te haya gustado. Este ejemplo de acordeón lo he visto mucho por ahí en google... adaptarlo a joomla era lo que faltaba :). Ahora es tu trabajo darle tu sello personal y colorearlo a placer. 

Gracias por tus comentarios y nos leemos el mes siguiente: ¡¡¡No te puedes perder la edición de aniversario!!!! 

Visto 2720 veces
Etiquetado como Spanish, Desarrollador
Luciano Martínez

Luciano Martínez

Desde Ciudad de México. 

Licenciado en Sistemas de Computación Administrativa por la Universidad del Valle México. Programador php desde 2009 y usuario apasionado de Joomla! desde el mismo año. 

Desarrollo sitios web con Joomla desde el 2010. 

Actualmente participo activamente con recomendaciones y ayuda a otros usuarios dentro del JUG de la Ciudad de México en Facebook.

Mi objetivo dentro del Jooma Magazine es aportar artículos sobre las experiencias y retos que he tenido con Joomla y cómo, quizá de la manera menos elegante, he dado con una solución eficaz y que me ha dejado mucho aprendizaje. 

Al pertenecer a esta comunidad, también deseo aprender. Creo firmemente que el aprendizaje es el camino del éxito y es mejor si este aprendizaje es recíproco. 

Cambiar de idioma

¡Suscríbase!
Su correo electrónico:
Invalid Input

contribuya-articulo p