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
Hola!! esta genial el codigo, lo malo es que lo adapte y al poner mas de 5 entradas en el menu primario se cae el programa =( , justo necesitaba 6 titulos en el menu, mala suerte.. tambien le puede poner el target para que funcionase con iframe y todo bien … solo se cae al poner 6 entradas.. con 5 funciona perfecto! si alguien sabe como arreglar esto, ojala lo ponga aqui.. bye!
Eso que tu quieres hacer, se hace sin problemas, aquà te modifique el ejemplo:
http://www.abcdisegno.com/archivos/javascript/menu-acordeon.html
Cuéntame!
Las consultas técnicas acerca del script, háganlas en el foro, ya que seguramente haya mucho más gente que los pueda ayudar, mostrar ejemplos, etc…
Hola, he esta muy interesante tu archivo y de hecho me ayuda un monton he intentado crear una cuarta opcion en el submenu y no puedo cuando pruebo no me sale nada en el explorador.
Espero me puedas ayudar, lo necesito con urgencia!
Ya me di cuenta de la burradaaaaaaaaa k estaba haciendo !!!
Genial el script, pero alguien sabrÃa como añadir un nivel mas? osea 3 niveles en total. He buscando pero no encuentro solución. Gracias!
hola, en tu primera respuesta a Pil (12 nov.2007) ha quedado claro como hacer que un item desplegado de segundo nivel nos mande a otra página. Pero yo estoy haciendo una pagina con framesets, y necesito especificar el “frame” de destino (target). ¿cómo podrÃa hacerlo?. GRACIAS !!!
Melissa me apsa el mismo error q a ti, pero el detalle esta en que yo aun no encuentro la burrada!! alguien q me ayude porfa =(
Hola, primero decirte que está muy bueno y que es muy fácil agregar Ãtems; sólo me queda preguntarte si pudiste solucionar el tema IE7 (o si alguien más pudo hacerlo?)
Sabes esta bueno el menu pero he encontrado un error todovia no lo averiguo cual es la razon, pero el menu se queda estatico ya no se despliega los submenus despues de varios clicks.
en Internet Explorer 8.0, se distorsiona tremendamente, perdiendo el diseño original
En primer lugar, Gracias!!! por el menú….está buenÃsimo…..y muy fácil de adaptarlo a lo que uno necesita…..,pero a mi también me queda un espacio grande en Internet Explorer 7….alguien lo ha solucionado???
hola
me sirvio mucho tu menu, pero cuando quiero agregar más items, los agrego en el arreglo que esta en la funcion de javascript en el documento html, pero no me los crea, como puedo resolver este problema
muchas gracias! es lo que estaba buscando.
se puede poner cada item de un color? me refiero a que alternative sea un color,blues otro, jazz otro…
muchÃsimas gracias!
hola se puede poner tercer nivel !!
Hola este está excelente. Solo tengo una pregunta :¿si quiero que funcione en mouse rollover sin necesidad de hacer click para desplegar? es eso posible ? y si es asà que cambios en el codigo?
muchas gracias
hola es es un buen menu, pero yo soy muy nuevo en esto y si podrias darme una mejor explicacion del codigo js te lo agradeceria
Hola, me interesa saber como direccionarlo a otro frame ya que el menu lo tenfo en un frame horizontal y la paginaaparece donde mismo. Podrias decirme donde agregar el codigo para mandarlo al mainframe?
Muchisisimas graciasias por el codigo, esta muy padre!!!
saludos desde hermosillo sonora.!!!
hola mi estimado negro estoy chekando tu menu, y la verdad me parece muy bueno, pero tengo un pequeño problema donde dice que va :javascript: tengo que sustituirlo por el link a donde va el sitio pero si el sitio tiene un target a un frame como lo vinculo?
Gracias por tu atencion prestada espero me ayudes a resolverlo…
bueno amigos les tengo la respuesta al problema sobre vincular el link a un frame, la verdad no se si esta bien pero ami me funciono de maravilla la respuesta esta en el archivo menu.js en la siguiente linea:
31 o bien:
“document.getElementById(”sub” + this.items[i][0]).innerHTML+= “” + this.subitems[i][k][2] + ““;”
en esta linea el codigo originalmente solo aparece de la siguiente manera:
“”
lo unico que hize fue agregar el target:’nombredetuframe’ + href=\”" + this.subitems[i][k][1] + “\” alt=\”" + this.subitems[i][k][0] + “\”>” tal y como esta en mi code y bien guardo los cambios y de ahi en el menu en el stylo lo unico que cambio es lo siguiente:
“["subitem-6","javascript:;",">INCENDIO"],” donde dice javascript:;INCENDIO”],”
y wuala cuando le das clik a tu vinculo aparecera en tu frame favorito…
chao.. saludos..
PD. sufri un poco mas por que la neta estoy bien pollo pa esto y mas o menos tengo nocion sobre el tema asi que nunca duden de su capacidad compañeros(as) saludos y muy bien este menu me encanto saludos… solo me gustaria saber como puedo agregar en el sub-item otro item pero bueno eso sera mañana voy a seguir chambeando en la page ya cuando la termine les mandare el vinculo para que la visiten jejeje saludos
buenas, te felicito por el menu, no sabes la del timpeo que me ha costado buscr un menu asi,no hay por ningun lado. He modificado el diseño praa que me sea util para mi web, y hay una cosa que no logro quitar, cuando pincho a cualquier opcion del menu me salen las lineas del rcuadro, como las puedo quita. mcuhas gracias. y mi maxima enhorabuena por el menu!!!!
shaggy,he estado probando lo de los links y no me funciona. me podias pasar el cosigo por mail??? te lo agradecerÃa, e que no hay forma de hacer el menu. mi correo es: gzaposa@hotmail.com
muchisimas gracias
hola; Soy nuevo en menús desplegables, mi pregunta es:
Cómo puedo mostrar una imagen al lado al pasar por los link?
creo que debo añadir en el CSS algo parecido a
#imagen{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
y en los links
#
gracias de antemano
hola; Soy nuevo en menús desplegables, mi pregunta es:
Cómo puedo mostrar una imagen al lado al pasar por los link?
creo que debo añadir en el CSS algo parecido a
#imagen{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
y en los links
nombre link
y en los links
–LI>nombre de link</li
he quitado pues no me deja enviar este txt
y en los links LI a href=” class=”imagen rel=”nombre.gif title=”Txt” nombre /a /li
he quitado ” y pues no me dja enviar link completos
Hola, el menu esta genial pero tengo un problema al enlazar los subitem, el caso es que sustituyo en el array en “javascript:” poniendo la ruta completa de lo que quiero direccionar pero no lo consigo, solo lo direcciona cuando este se encuentra en la misma carpeta donde tengo tanto la pagina como el script, ¿como hago si quiero direccionarlo a una direccion web o a alguna que tenga fuera de esta carpeta?. Un saludo