muchas veces me ha sucedido que para un sitio determinado necesito hacer que un menú sea desplegable, pero por lo general no quiero que la página se recargue para desplegar el menú. hay muchas soluciones si se busca por la web, pero la mayoría no me parece óptima, ya que o escriben el menú completamente en javascript, o lo escriben con tablas o algun otro elemento que termina generando problemas de accesibilidad e indexación.
Por esto es que me decidi a escribir mi version propia de menú desplegable. mis objetivos son básicamente dos, el menú debe ser una lista sin orden (UL), pudiendo tener items de menú en dos niveles. tener la menor cantidad posible de codigo extra (en el markup).
este es el ejemplo de la lista que pretendo usar como menú, quiero que esto sea asi para que el menú esté completo siempre en la página.
[cc lang="xhtml"]
[/cc]
lo ideal sería que las sublistas esten cerradas (o mejor dicho no visibles) para esto una manera sería agregar estilos para quesuceda esto y ademas agregar un javascript en cada evento onclick de los enlaces que contienen las sublistas, pero hacero de esta manera va en contra de uno de mis objetivos, mantener el código limpo, por lo que recurri a otra idea que es agregar este código en el onload de la página. la funcion en javascript que hace eso es esta:
[cc lang="javascript"]
function prepareMainMenu() {
var menu = document.getElementById(’mainlevel’);
var active = document.getElementById(’active-menu’);
if( menu && active ){
//var items = menu.getElementsByTagName(’li’);
var items = menu.childNodes;
for( i=0 ; i
if( active.parentNode.parentNode==items[i] )
items[i].childNodes[1].style.display = 'block';
else
items[i].childNodes[1].style.display = 'none';
items[i].childNodes[0].onclick = function () {if(this.parentNode.childNodes[1].style.display=='block') this.parentNode.childNodes[1].style.display='none'; else this.parentNode.childNodes[1].style.display='block'; return false;}
}
}
}
}
[/cc]
aca les muestro el ejemplo funcional de ese menú , espero que les sea útil.
Esteban.
You are the brick! Reading stuff like this written in the way like this is a great pleasure for me.
thanxs, i will update this code sometimes and show some variations. i have used it many times since i wrote it. but every time i have to add some tweak somewhere mostly to satisfy some client requirement
Esteban
hola tengo una pregunta el menu esta barbaro pero yo nesecito que cuando abro otro bloque el que abri anteriormente se cierre automaticamente esto es posible…
gracias por leer
espero respuesta
pablo
otra vez yo, lo que te pregunte primero, tengo que retocar el js??? me podes mandar la solucion gracias
hola, una manera de hacer eso, siempre hay muchas maneras de hacer algo, es retocando el js. en general no me gustan mucho esos menues y es po eso que no lo escribi asi.
lo que tendrias que hacer es agregar en las funciones que pone en el onlick del item ( LI ) un bucle que recorra el arbol del menu y lo cierre todo. calculo que esto sería mas facil de implementar con algun framework de js, como por ejemplo jquery
saludos
Esteban
gracias esteban saludos desde ak
que tal esteban…el menu esta muy bueno pero tengo una consulta, yo quiero poner dos listas y me ejecuta una sola el scriptmla otra no funciona…quisiera saber q es lo q tengo q cambiar para q funcionen las dos. muchas gracias de antemano
la manera sucia y rapida de hacer eso sería que dupliques la funcion de inicializacion, la segunda vez le pones los id que uses para identificar la lista y el item activo
la opcion un poco mas elegante es reescribir esa funcion para que reciba como parametro el id de la list ay del item activo.
si alguien lo escribe que me pase el código asi lo publico, si llego a tener tiempo el finde lo hago
Saludos
Esteban