Hola, On 7/21/06, Rafa Garcia <[EMAIL PROTECTED]> wrote: > > Buenas tardes a quien quede por ahí; ando enfrascado en un trabajo > (http://www.optimastudio.com/index2.php) y a la hora de probar las > primeras validaciones de html y css me encuentro con que el menú no me > valida. Al repasarlo me doy cuenta de que está mal marcado, pero ahora > es tarde porque el cliente quería este efecto de slide progresivo y > soluciones alternativas como la de cssplay > (http://www.cssplay.co.uk/menus/vertical_slide.html ) no le satisfacen.. > > ¿Conocéis algún ejemplo parecido al que yo he aplicado que valide?. De > no ser así, las opciones que me quedan es marcar bien esa lista y > meterme en el código para intentar solucionarlo, o dejarlo como está, > cosa que me revuelve el estómago. Otra solución es adentrarme en el > proceloso mar de las librerías js e intentar programar yo algo parecido > al interface del online tools, aplicado a elementos de lista; pero no > siendo programador, me produce urticaria la mera idea de ello. >
Yo hice algo parecido en http://www.corrienteschamame.com/ con esta funcioncita: http://www.corrienteschamame.com/js/menu.js Aunque, tal como está, requiere agregar el evento onclick en cada li. Pasó que cuando lo estuve haciendo intenté agregar el evento directamente en el DOM y algo falló, así que lo dejé para resolverlo más adelante y... como pasa siempre, quedó así. Pero se podría complementar con otra funcioncita, que te pego a continuación (van las dos comentadas). <script type="text/javascript"> function doMenu() { navRoot = document.getElementById("nav"); y = 0; /*recorremos todos los elementos del menú*/ for (i=0; i<navRoot.childNodes.length; i++) { nodeList = navRoot.childNodes[i]; /* verificamos si es un elemento de lista */ if (nodeList.nodeName=="LI") { y++; /* agregamos el atributo rel con el número de orden del elemento */ nodeList.rel = "sub" + y; /* agregamos el evento onclick */ nodeList.onclick = function() { /* ejecutamos la función tomando como parámetro el número que guardamos en el atributo rel */ openMenu(this.rel.substr(3)); } } } return false; } function openMenu(x) { x = parseFloat(x); navRoot = document.getElementById("nav"); y = 0; /*recorremos todos los elementos del menú*/ for (i=0; i<navRoot.childNodes.length; i++) { nodeList = navRoot.childNodes[i]; /* verificamos si es un elemento de lista */ if (nodeList.nodeName=="LI") { y++; /* verificamos si el elemento tiene el mism número de orden que el pasado como parámetro de la función */ if (y==x&&nodeList.className=="") { /* agregamos una clase que usaremos en la CSS */ nodeList.className="open"; } else { /* si no corresponden los números quitamos la clase, así cerramos los demás submenús */ nodeList.className=""; } } } return false; } onload = doMenu; </script> Ojo: no la probé, así que no tengo idea si funcionará o no. En todo caso, podemos continuar la discusión en la lista JavaEScript, que es más específica del tema. Saludos, -- Camilo Kawerín _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
