Típico elemento de levante para los diseñadores Web ha sido a lo largo de estos tiempos el clásico menú desplegable Javascript. Por qué digo elemento de levante?… Porque siempre tratamos de conseguir uno ya construido para luego poder personalizarlo y adaptarlo a nuestras necesidades. Lo dificultoso de esto muchas veces se da, cuando lo probamos en algunos navegadores y observamos que no funciona correctamente; esto hace que muchas veces nos resulte un tanto engorroso encontrar el adecuado. Por otra parte también podemos encontrar algunos que si bien funcionan, están generados por un excesivo código. Un ejemplo de esto es el caso del menú que podemos construir utilizando Dreamweaver, que si bien nos genera mucho código, también tiene la virtud se ser bastante dúctil, ya que podemos construirlo de forma horizontal, vertical, de varios niveles, personalizar su aspecto, etc.
A todo esto siempre tuve ganas de construir un menú Javascript desplegable, un poco por necesidad y otro poco porque siempre algunos colegas me están preguntando si tengo alguno a mano o si conozco de alguno para descargar.
Así que me puse las pilas y construí uno de dos niveles (ítems y sub ítems). Estoy convencido de que un menú desplegable de más de dos niveles no es bueno para la usabilidad de un sitio, ya que se torna un tanto engorroso y es mejor que las secciones del sitio estén siempre a la vista y no escondidas en un menú desplegable. Siempre trato de escaparle a este tipo de menú, aunque también es cierto que nos puede sacar de un apuro cuando estamos acotados en espacio.
Les recomiendo evitar el uso de este tipo de menú, tratando de que todas las secciones del sitio estén a la vista. Si en algún memento ven que la presencia de un menú desplegable es lo más adecuado, acá les voy a dejar un ejemplo sencillo; ¡SI!, ese mismo menú que siempre quise programar y nunca había podido, ya sea por limitaciones de conocimiento y/o tiempo.
Este menú está testeado en Firefox, IE 6-7 y Safari 3; lamentablemente no puedo asegurarles que funcione correctamente en otras versiones o en otros navegadores, básicamente por no haber podido testearlo.
Acá va un resumen de cómo está construido, el resto de los detalles los pueden ver en los comentarios que aparecen en el código fuente de los archivos.
Menú desplegable de 2 niveles:
Un DIV “menu” es el contenedor de todo; cada ítem está compuesto por un DIV que se escribe por medio de javascript, al igual que los sub ítems. Estos ítems y sub ítems se encuentran almacenados en 2 arrays anidados. Cada ítem está compuesto por el nombre del ID del DIV que lo contiene, un link y el nombre que llevara el texto de dicho ítem.
Por medio de un bucle for e innerHTML se escriben los DIV con los ítems y a su vez si existen sub ítems en el array, otro bucle se encarga de escribirlos. Cada bloque de sub ítems está compuesto por una lista.
Esto significa que el volumen y organización del menú estará dado por el volumen y organización de los arrays.
Por último, podemos personalizar el diseño del menú utilizando CSS, observen el código de dicho CSS dentro del HTML, el cual es bastante intuitivo.
Bueno queridos, espero les haya aportado algo, puedan utilizarlo y porque no, mejorarlo, ya que NO soy ningún erudito en el tema.
Otra variante, menú acordeón:
Esta es otra variante del mismo menú. Existe una clase “Desplegable” la cual hereda las propiedades de la súper clase “Menu” y de esta manera agregarle la posibilidad de que los sub ítems se desplieguen en forma de acordeón.
Acá pueden ver el menú en funcionamento
Opción del menú en forma de acordeón
Acá pueden descargar los archivos
¡Hasta pronto!
Categoría: Tutoriales
Publicado por: negro
Hola, estaba buscando algun menu desplegable y este es buenisimo.
Lo que no quiero saber es como hacer para que cuando hago “click en alguna de las opciones”, me habra la pagina relacionada.
Por ejemplo: estoy en el menu “BLUES” y al hacer click en la opcion “Keep On Walking” que me aparezca la pagina con la letra de la cancion.
Bueno, gracias de antemano!
¿Qué tal Pil?
Para ello debes especificarle el link correspondiente en el array que se encuentra en el Head de la página.
["subitem-2","javascript:;","Keep On Walkin"]
Sustituyes “javascript:;” por el link al que quieres que vaya el ítem “Keep On Walkin”
Espero te sirva.
Saludos
negro
Holas!!
Lo voy a probar a ver si me sale =)
Gracias Negro!!!!
ola q tal!!!
estaba probando este menu…con vinculo, y todo perfecto…
pero mi duda es ¿se puede poner una imagen en vez de texto en los menus principales o items?
gracias
Poder ser puede, pero para ello habría que adaptar la programación y ya no sería sencillo, de todas maneras NO es recomendable que los ítems de un menú sean imágenes, imagínate si lo haces dinámico, tendrías que siempre tener que recordar una imagen, aparte de la dificultosa indexación de estos ítems para los buscadores.
ok gracias x responderme…x cierto lo tuyo solo es javascrip? o manejas otro tipo de programacion tambien…nos vemos =)
En programación soy lo que se suele llamar “Un atrevido”, pero programo en Action Script (orientado a objetos), un poco de Javascript y muy poquito de PHP.
En lo que si soy relativamente bueno, se podría decir que es en HTML y CSS.
Saludos
Excelente alternativa para diseñar menús sencillos y vistosos y lo es aún más, la explicación que incorporas sobre los scripts.
Sin ser experto en la materia, apenas lo vi, pude adaptarlo a lo que requiero.
Te agradezco que compartas tus conocimientos con la comunidad Web y el hecho aun mayor que lo haces desinteresadamente, de ser posible y pudieras publicar algo mas complejo, te lo agradeceríamos altamente, aún cuando, todas las cosas y aún mas el conocimiento tiene su valor.
Agradecido por tu generosidad:
Manuel
Hola,negro, me podrías decir como hago el efecto acordeón?? muchas gracias, la verdad tu menu es excelente!! Saludos.
Wenas, el menu me parece sencillo y bonito, estoy usando el menu acordeon pero me da problemas en ie7. A diferencia de mozilla y alguna version (sin actualizar) de ie6, en ie7 me queda un margen abajo de unos 10px aprox. Mi pregunta es si sabes alguna manera de adaptarlo mediante css a ie7. Enhorabuena por el trabajo, y si doy con la solución lo posteo. Gracias!!
Excelente el menu. Me dio la tal mano para salir del paso.
Hola, gracias por compartir tus conocimientos!!!! Quizas puedas orientarme con lo siguiente: tengo que armar un cd, desde el cual por medio de un html que tiene un menu hecho con java en una capa html, se linkee a diferentes archivos de word para que el usuario descargue manuales. Es posible?
Hola!
Oye ni te cuento too lo que busque!
esta super, justo el que queria!
Habia visto varios pero era justamente este!
Muchas Gracias!
Muchísimas gracias!! Es perfecto!!
hola, está perfecto muy bueno, pero no me funciona en ie7, como dice antonio.
Yo ahora estoy usando IE 7 y me funciona, si veo que deja unos espacios verticales entre ítems. Tratare de arreglarlos.
Saludos
Reboxetine….
Vestra reboxetine. Reboxetine edronax. Reboxetine….
A los que no os funciona en el Explorer, probad a poner la declaración del dtd antes, que seguro os la habéis comido al principio del documento:
Con el Firefox tira sin ella, pero el explorer la necesita para que rule correctamente (sino muestra de mano los menús extendidos y se vuelve loco al desplegar y replegar).
Negro, felicidades y gracias por tu menú, soy otro de los que se queda a la espera de esa revisión para los 10px de más del explorer… intento dar con ella, si lo consigo, os lo dejaré también por aquí. También estaría bien que hubiera cierta similitud de criterios entre firefox vs. explorer en cuanto a la velocidad de despliegue (rapidísima en fire, lentísima en ie), pero bueno, cosas menores
la declaración entre el simbolito menor que y mayor que, que arriba no me la publicó
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
Hola, como puedo hacer para que los vinculos se abran en otra ventana ???
Excelente el menú, lo probé y funciona de 10 en casi todos los browswers, en el único que no lo hace correctamente es en el Explorer, en él queda desplegado y se ven todos los items y subitems.
Una consulta: para agregar un subnivel más profundo, o sea un sub-subnivel cómo se hace? estuve tratando pero no lo logré, espero que puedas ayudarme. Muchas gracias.
Encontre la solucion
en el script habia que agregar despues del <a y antes del href la opcion target=”tu_ventana”.
Grax funciona muy bien en Firefox, aunque en IE7 da probelmillas al verse los items un poco separados entre si
Hola…excelente el menu pero tengo un problema…en q parte del codigo esta su tamaño??..como hago para q el menu sea mas pequeño si es posible??..gracias
hola quisiera saber como puedo hacer que fila aparesca por defecto desplegada.
gracias