Para obtener este efecto vamos a utilizar html, css, y javascript que cree la animación, este menú funciona tanto en Internet Explorer como en Firefox.
EL EVENTO ONLOAD Y LA LISTA HTML
El archivo html va a ser el que muestre el menú, por lo que en primer lugar colocamos un evento onload al body que nos cargue una función javascript, luego creamos una capa div y la nombramos “sidebar”, dentro de esta capa crearemos nuestra lista sin ordenar, recuerden que para crearla se utiliza la etiqueta “ul” para indicar que se trata de una lista sin ordenar y las etiquetas “li” para indicar que se trata de un item de la lista… ojo que nos es necesario que se cierren estas etiquetas “li”, pero si lo desarrollan en xhtml deben cerrarlas. Ahora bien, para crear esta aplicación vamos a anidar una lista dentro de un item de otra lista a fin de crear el menú desplegable.
Primero, añadimos el evento onload a la etiqueta body, para que llame a la función menu_init, con 4 parametros:
<body onLoad="menu_init(0,12,1,-20,10)">
El html de la lista desordenada seria el siguiente:
SOBRE EL CSS Y LAS DOS IMAGENES
Una vez creado el documento del contenido de nuestro menú vertical, debemos elaborar el código para poder darle forma de menú a nuestra lista, para ello crearemos un archivo css, al que llamaremos "menu.css", y en él escribiremos el código necesario para que nuestro menú pueda ser visto en distintos navegadores.
#sidebar {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 20px 0 3em 0;
padding: 0;
font-size: 16px;
font-weight: bolder;
}
#menunav {
margin: 0;
padding:0;
}
#menunav li {
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(img/debajo_btn.jpg);
/* background-repeat: repeat-x; */
border-bottom: 1px solid #0074E3;
background-color: #0074E3;
}
#menunav ul {
border-top: 1px solid #eeeeee;
margin: 0;
padding: 0;
z-index: 10000;
}
#menunav ul li {
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #333333;
}
#menunav a {
display: block;
text-decoration: none;
background-color: transparent;
padding: 4px 12px 4px 10px;
color: #ffffff;
border-top: 1px solid #0061BD;
border-right: 1px solid #0061BD;
border-bottom: 0;
border-left: 4px solid #0061BD;
line-height:1;
}
/*controla la botonera */
#menunav a:hover, #menunav a:active, #menunav a:focus, #menunav .menuon, #menunav .menuon:hover, #menunav .menuon:active {
color: #333333;
background-color: #0061BD;
letter-spacing: 0.01px;
border-top: 1px solid #0061BD;
border-right: 1px solid #0061BD;
border-left: 4px solid #0061BD;
background-image: url(img/encima_btn.jpg);
background-repeat: repeat-x;
}
#menunav .menumark, #menunav .menumark:hover { font-weight: bold; }
/*Controlan los links y la imagen de flecha */
/*the normal trigger link */
#menunav .menutrg, #menunav .menutrg:hover, #menunav .menutrg:active {
background-image: url(img/flecha.gif);
background-repeat: no-repeat;
background-position: right center;
}
#menunav .menutrg:hover {
background-position: right center;
background-image: url(img/encima_btn.jpg);
background-repeat: repeat-x;
}
/*controla el desplazamiento y alcance de los submenus */
#menunav .menuhide {
left: -9000px;
border: 0;
}
#menunav .menushow {
left: auto;
z-index: 20000;
}
/*modifica el menu madre */
#sidebar {
position: absolute;
top: 150px;
left: 10px;
width: 11em;
font-size: 0.85em;
}
DEL JAVASCRIPT
Teniendo el contenido y el diseño de nuestro menú, ahora nos falta crear su efecto de apertura, desplazamiento y cierre de los submenus. Para esto crearemos un archivo javascript al que llamamos "menu.js" el que contendra 11 funciones las que controlan todo el complejo efecto, todas las funciones estan ligadas por lo que si bien pongo comentarios para su comprensión, en realidad todas las funciones son necesarias para el funcionamiento de la animación. Esta es la estructura del fichero javascript:
/* modifica las caracteristicas de los menus hijos */
function menu_set(){
}
/* modifica caracteristicas de apertura de menus */
function menu_init(){
}
function menu_trig(a){
}
/*muestra los menus */
function menu_show(a,bp){
}
/* oculta los menus */
function menu_hide(u){
}
function menu_tg(a,b){
}
function menu_close(evt){
}
function menu_clr(){
}
/* crea la animación */
function menu_anim(a,st){
}
function menu_mark(){
}
function menu_open(){
}
ORGANIZANDO LOS ARCHIVOS
Habiendo creado todos los archivos necesarios para esta aplicación solo nos queda organizarlos en el servidor y vincularlos.
La organización será la siguiente:
- Un primer nivel con el archivo "index.html" y una carpeta llamada "menu".
- Un segundo nivel, dentro de la carpeta "menu" colocaremos los archivos "menu.css" y "menu.js" y crearemos una carpeta llamada "img".
- Y en el tecer nivel, dentro de la carpeta "img" colocaremos nuestras tres imagenes: los botones "debajo_btn.jpg" y "encima_btn.jpg" y el icono de flecha "flecha.gif".
Para finalizar, solo nos queda vincular los archivos al "index.html", para esto lo único que se tiene que hacer es copiar el siguiente codigo dentro de las etiquetas <head></head>. El código es el siguiente:
Para descargar el código fuente completo, primero registrate e inicia sesión. Luego regresa a esta página.
Actualizado: Ahora que ya sabemos como crear este menú, veamos como crear un Menú Horizontal Desplegable con background transparente.
Si te gustó este artículo también te gustará...
Tengo el menu dentro de un FRAME en la parte izquierda y cuando se muestra el submenu dinamico se encima con el menu principal, hay manera de arreglarlo, para que aparezca sobre el otro frame derecho???
pero muy buen aporte, gracias!!
ddd ta muy bueno el menu
hola, hice el menu hi esta moy bien 10/9
amigos cuando guarden una pagina con botones depegables guardenlo como mhtml, y analicen sus codigos haciendo clic derecho View Source, solo analizalo y copien codigo.
A mi me funciono muy bien, ademas es muy ligero, muy util!
EXCELENTE CODIGO. ESTOY APRENDIENDO A PROGRAMAR Y CODIGOS DE ESE TIPO SON MUY BUENOS EJEMPLOS PARA APRENDER.
SE AGRADECE.
A mi en IE 8 e IE7 me va perfecto, pero sin embargo en firefox 3.5.9 no me despliega los submenus, alguien sabe porque es? si teneis la solucion y podeis decirmel, mi email es floren-82@hotmail.com un saludo
Excelente codigo, con un poco de modificacion se crea maravillas. No se porque el primero dijo que el resultado era feo.
la pagina es muy interesante
Buenas tardes, muy bueno tu articulo , me re sirvio este menu, porque estoy haciendo una pagina con categorias y subcategorias ilimitadas , y esto me viene genial.
Yo se CSS y ya modifique la apariencia del menu, pero necesitaria saber que modificar para que el submenu que se desplega aparezca un poco mas a la derecha y mas abajo.
Muchas gracias
Descargué el menú, y me sirve! MUCHAS GRACIAS!
Encontré el problema que tiene para que funcione correctamente en Firefox.
En la función menu_hide(u) hay que reemplazar la linea:
ua.className=ua.className.replace("menuon","menutrg");
por:
ua.className=ua.parentNode.className.replace("menuon","menutrg");
Y así funciona ya el menú en Firefox. Lo probé con la corrección en IExplorer y siguió andando bien. No sé en otros navegadores.
Si alguien hace la corrección y puede testearlo comente por favor!
Saludos!
Descargué el menú, y me sirve! MUCHAS GRACIAS!
.Solucioné el problema que tiene para que el menú desplegable funcione correctamente en Firefox:
En la función menu_hide(u) hay que reemplazar la linea:
ua.className=ua.className.replace("menuon","menutrg");
por:
ua.className=ua.parentNode.className.replace("menuon","menutrg");
Y así funciona ya el menú en Firefox. Lo probé con la corrección en IExplorer y siguió andando bien. No sé en otros navegadores.
Si alguien hace la corrección y puede testearlo comente por favor!
.Y sobre el error de las funciones menu_adma() ymenu_admb() vi que otros comentaron la solución también, yo lo repito:
Hay que comentar en la última linea:
//menu_adma();menu_admb();
Y listo!
Saludos!
PORQUE SALE UN ERROR DE INTERNET "Object Espected"
menu.js ?
Brother por q no me funciona en el firefox 3.0.10?
Hola, ya probe este menu, pero en internet explorer da la impresión de que al momento de desplegar el menu, va mas lento. Alguien sabe como hacer cambiar la velocidad con que se despliega el menu emergente.
Hola,
Me parece interesante el menú a la par de útil y fácil de implementar, y sobre que a algunos les parezca muy básico de estética, solo hay que cambiar algunas cosillas simples para dejarlo al gusto de quien lo ponga en su web.
Mi pregunta es: ¿Se podría hacer algún cambio en el código para que saliera en modo horizontal y con los desplegables hacia abajo, en vez de en modo vertical con los desplegables hacia la derecha?
Gracias, un saludo.
Excelente!
Gran aportación. Me registre en el sitio exclusivamente para agradecerte. ;)
gracias esta muy bien explicado el menu, lo probare ya que soy princiante en esto, y me aprecio muy bueno.
esto no funciona ,no sé si ese el javascript ,pero solo se muestra como una lista larga hacia abajo nada mas.
Hola, por favor, por favor, necesito que alguien me ayude, porque me estoy desquiciando bastante. Necesito este menú para un proyecto urgente, y resulta que al implementarlo en la página (yo lo tengo dentro de una etiqueta div), parece salirse fuera de la etiqueta y se posiciona a la izquierda del todo, rompiendo mi esquema. POR FAVOR, AYUDA URGENTE... Gracias de antebrazo.
me logeo y no sale el link de descarga :-(
justo lo que buscaba..... gracias
Me he registrado iniciado sesión pero no puedo descargar el código,
Buenas tardes:
como descargo el codigo? no puedo hacerlo y estoy registrado se supone e inciada la sesion. mil gracias
me he registrado y no consigo ver el link de descarga del ejemplo.
lo voy a probar a ver que tal gracias de antemano
A mi me ha ido de muerte. Me parece una aplicación bastante secncilla y muy muy muy funcional. El único inconveniente que veo es que te limita a la hora de aplicar (:visited). Alguien sabe como solucionar este problema???
Graciass
Hola me parece un ejemplo sencillo y util para comprender la creacion de menus...
El link "descargar el codigo fuente" tiene un error, una pregunta - el resultado que muestran no utiliza las imagenes...?
Alex
Gracias por el código!
Páginas