Como siempre, el material con el que hice el ejemplo está disponible.
]]>
Recontra conocidas ya son los menúes construídos con listas de ítems. Los hay verticales, y muy fácil es transformarlas a horizontales. Gráficamente, existen necesidades que a través de la habilidad del diseñador/desarrollador se pueden solucionar elegantemente con unos trucos de CSS. En este caso, mostraré una manera de crear menúes tipo árboles, utilizando algunos GIF para lograr esos enlaces y nodos.
Bueno, lo primero es el código HTML. Básicamente se compone de una lista con <ul> y algunos <li> tienen sublistas, como verán en el ejemplo a continuación:
<ul id="menu_arbol">
<li><a href="#" title="Ver las Cervezas">Cervezas</a>
<ul>
<li><a href="#" title="Enlace a cerveza Pilsen">Pilsen</a></li>
<li><a href="#" title="Enlace a cerveza Bock">Bock</a></li>
<li><a href="#" title="Enlace a cerveza Lager">Lager</a></li>
<li><a href="#" title="Enlace a cerveza Ale">Ale</a></li>
</ul>
</li>
<li><a href="#" title="Ver los Vinos">Vinos</a>
<ul>
<li><a href="#" title="Enlace a Vino Merlot">Merlot</a></li>
<li><a href="#" title="Enlace a Vino Sirah">Sirah</a></li>
</ul>
</li>
<li><a href="#" title="Ver los Licores">Licores</a>
<ul>
<li><a href="#" title="Enlace Licor Ron">Ron</a></li>
<li><a href="#" title="Enlace a Licor Vodka">Vodka</a></li>
</ul>
</li>
</ul>
Una simple lista de 3 items donde 2 de ellos tienen subitems. En esta caso será un menú, pero puede ser también sólo una lista de elementos (ordenados <ol> o desordenados <ul>) sin enlaces. Bueno, a lo nuestro.
Primero que todo, a través del CSS esconderemos los bullets, ya que los reemplazaremos por una imagen de una línea vertical.
ul#menu_arbol, ul#menu_arbol ul {
list-style-type: none;
background: url(imagenes/linea_vertical.gif) repeat-y;
}
ul#menu_arbol li {
padding: 0 10px;
}
ul#menu_arbol ul {
margin-left: 5px;
}
Ahora, conectamos los nodos:
ul#menu_arbol li {
padding: 0 10px;
background: url(imagenes/nodo.gif) no-repeat;
}
Finalmente, nos queda poner otra imagen donde las listas se cierren. Esto lo tendremos que hacer agregando una class manualmente a los últimos ítems de cada lista:
ul#menu_arbol li.cierre {
background: #FFF url(imagenes/cierre.gif) left top no-repeat;
}
Importante fijarse que en este punto se agregó un color de background (blanco) lo que se hizo necesario para tapar la línea vertical que pasa por debajo (dado que esta imagen es un GIF transparente).
Con eso estaríamos, pero hagamos esto bien de una. Podemos automatizar tarea de agregar las class, a través de Javascript:
window.onload = function () {
var tree = document.getElementById("menu_arbol");
var lists = [ menu_arbol ];
for (var i = 0; i < tree.getElementsByTagName("ul").length; i++)
lists[lists.length] = tree.getElementsByTagName("ul")[i];
for (var i = 0; i < lists.length; i++) {
var item = lists[i].lastChild;
while (!item.tagName || item.tagName.toLowerCase() != "li")
item = item.previousSibling;
item.className += " cierre";
}
};
Esto lo que hará será primero buscar en todos los <ul> (getElementsByTagName) su último nodo (lastChild) y le agregará la class="cierre" que creamos (className +).
Podemos también agregarle movimiento, un toggle() por ejemplo. Utilicen el framework que más les acomode, en este caso aprovecharé lo liviano de Mootools:
window.addEvent(’domready’, function(){
var mySlide = new Fx.Slide(’cervezas’);
mySlide.hide()
$(’toggle_c’).addEvent(’click’, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
Primero, tomamos el #cervezas y lo escondemos (mySlide.hide()); luego, tomamos el #toggle_c (que se lo dí al <ul> del subítem) y le damos la instrucción de mostrarlo o esconderlo cuando le haga un click ($(’toggle_c’).addEvent(’click’) y mySlide.toggle();). Luego, se repite con los otros elementos de la lista.
Por supuesto, todo el código a través de un view source de los ejemplos.
]]>