consulta sobre menu desplegable con javascript

shianim · #1 (**permalink**) 12/09/2013, 10:25

Amigos tengo el siguiente problema, necesito hacer un menú vertical desplegable con efecto deslizante, buscando por internet encontré el siguiente ejemplo:

http://www.csslab.cl/ejemplos/menu_arbol/6.html

que utiliza un js llamado mootools, el problema se me presenta cuando quiero añadir más subniveles, dentro de un sub nodo, no se ve ni se desliza como los como los primeros nodos, les dejo el código de como lo he implementado, espero me puedan ayudar muchas gracias.

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSSLab: men&uacute; tipo &aacute;rbol</title>

<style type="text/css">
* {	margin: 0; padding: 0; }
body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; }
div#contenedor { width: 80%; margin: 20px auto; }
div#contenedor a { color: #F00; text-decoration: none; }
div#contenedor a:hover { color: #FFF; background: #F00; }

ul#menu_arbol, ul#menu_arbol ul {
list-style-type: none;
background: url(imagenes/linea_vertical.jpg) repeat-y;
}

ul#menu_arbol li {
padding: 0 10px;
//background: url(imagenes/nodo.gif) no-repeat;
}

ul#menu_arbol li.cierre {
//background: #FFF url(imagenes/cierre.gif) left top no-repeat;
}

ul#menu_arbol ul {
margin-left: 5px;
}

ul#menu_arbol ul li {
font-size: 14px;
}

</style>

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/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";
}
};


window.addEvent('domready', function(){
var mySlide = new Fx.Slide('activo');
mySlide.hide()
$('toggle_c').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});

window.addEvent('domready', function(){
var mySlide = new Fx.Slide('vinos');
mySlide.hide()
$('toggle_v').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});;

</script>

</head>

<body>

<div id="contenedor">

<ul id="menu_arbol">
<li><a href="#" title="Activo" id="toggle_c">1.Activo</a>
<ul id="activo">
<li><a href="#" title="Activo Circulante" id="toggle_v">1.1.Activo Circulante</a>
<ul id="vinos">
<li>
<a href="#" title="Activo Circulante">1.1.1.submenu</a>
</li>
</ul>
</li>
</ul>	
</li>
</ul>

</div>

</body>
</html>