Menú Horizontal Desplegable con efecto de Tranparencia
Hace unos días vimos como a partir de una lista creamos un Menú desplegable vertical, ahora veamos como crear un menú horizontal, muy fácil de entender y personalizar, con unas pocas líneas de código css y javascript.
El efecto que buscamos, con un código muy ligero, es que el background de cada submenú sea transparente, por cierto funciona tanto en Internet Explorer como en Firefox y otros navegadores.
Vamos a empezar en el archivo html, colocandole los enlaces al css y javaScript externos:
<head>
<title>Menú Horizontal Desplegable</title>
<link rel="stylesheet" type="text/css" href="menuheader.css" />
<script type="text/javascript" src="menuheader.js"></script>
</head>
Luego creamos las capas del encabezado. Y dentro de estas la lista desordenada a la que identificamos como nuestro "navegador", esto es sumamente importante para relacionarla con el JavaScript (<ul id="nav">):
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li><a href="">Home</a>
<ul> <li><a href="#">General</a></li>
<li><a href="#">Conócenos</a></li>
<li><a href="#">Mapa del Sitio</a></li>
</ul>
</li>
<li><a href="#">Nav 1</a>
<ul> <li><a href="#">Nav 1 - 1</a></li>
<li><a href="#">Nav 1 - 2 </a></li>
<li><a href="#">Nav 1 - 3 </a></li>
</ul>
</li>
<li><a href="#">Nav 2</a>
<ul> <li><a href="#" target="_new">Nav 2 - 1</a></li>
<li><a href="#" target="_new">Nav 2 - 2</a></li>
<li><a href="#" target="_new">Nav 2 - 3</a></li>
<li><a href="#" target="_new">Nav 2 - 4</a></li>
</ul>
</li>
<li><a href="#">Nav 3</a>
<ul> <li><a href="#" target="_new">Nav 3 - 1</a></li>
<li><a href="#" target="_new">Nav 3 - 2</a></li>
<li><a href="#" target="_new">Nav 3 - 3</a></li>
<li><a href="#" target="_new">Nav 3 - 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
Como pueden apreciar, hemos creado una lista anidada para que se despliegue mediante una función en JavaScript, esta función tiene el sello de la reconocida página de alistapart.com:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Con esta función lo que hacemos es tomar el elemento identificado como "nav" <!--StartFragment --> y pasarlo a través de todos sus hijos, añadiendo los eventos mouseover y mouseout a todos los elementos anidados <li>, al cargar la página la función starList se ejecuta.
Ahora, sólo nos falta el efecto de tranparencia, para ello utilizamos las css styles:
body{margin:0;padding:0; text-align:center; background-color:#993333;}
#main{width:780px;
position:absolute;margin-left:-370px;left:390px;
/* posición del nav */
text-align:center;}
#header{ width:100%;background:url(header.jpg) no-repeat;height:126px;}/* -------- Menú de Navegación -------------------- */#nav{margin:0;position:absolute;top:10px;right:30px;
/*margen con el div */}
#nav li{color:#FFFFFF;
/*color base del texto*/ float:left;width:11em;margin:0;padding:0;
list-style:none;background:transparent;font:11px Verdana,Tahoma,Helvetica,Sans-serif;text-align:center;position:relative;cursor:default;}
#nav li ul{padding-top:7px;
/* referente a la parte superior */
margin:0;}
#nav a{text-decoration:none;}
#nav li a{ color: #FFFFFF; font-weight: bold;}
#nav li a:hover{text-decoration:underline;}
#nav li li a:hover{text-decoration:none;}
#nav li li{filter:Alpha(opacity=50,finishopacity=50,style=1);
/* Transparencia en Internet Explorer */}
#nav li li a{ border-color: #993333; border-style:solid; border-width:0 2px 1px 2px; display:block; color:#000000; font-weight: bold;background:transparent url(nav.png) 0px 0px repeat scroll; line-height:18px;}
#nav li li a:hover{color:#000000;background:transparent url(navhover.png) 0px 0px repeat scroll;
/* Transparencia en Otros navegadores */}
li ul{padding:0.5em 0 1em 0;display:none;position:absolute;top:100%;left:0;}
li>ul{top:auto;left:auto;}
li li{float:left;border:0;display:block;
background:transparent;}
li:hover ul,li.over ul{display:block;}
Como te puedes dar cuenta, utilizamos dos imagenes de extensión .png para el efecto, estas deben ser transparentes para conseguir el efecto en los navegadores como Firefox, Opera, Mozilla, etc.,pero además añadimos el filtro Alpha para conseguir el efecto en Internet Explorer.
Para ver el resultado pulsa aquí.
Para descargar el código e imagenes pulsa aquí.
Hola me acabo de registrar porque no lograba compatibilidad con internet explorer en este tipo de menues y lo que lei me fue de gran ayuda. ya tengo mi menu funcional.Ademas estuve dando un vistazo a la web y me parecio super interesante asi que se han ganado un adepto.saludos y muuuuuchas gracias
- responder
Enviado por imefisto (no verificado) el Sáb, 04/29/2006 - 11:59.Bienvenido a baluart... Las gracias a ti, por tus palabras.Saludos.
- responder
Enviado por Balu (no verificado) el Dom, 04/30/2006 - 05:49.Hola el menu horizontal publicado está muy bueno y bien diseñado, lo he probado y me ha funcionado muy bien, pero tengo problemas al crear un submenu de las opciones, ya que no lo tiene en el ejemplo. Me gustaria que me ayudaran en eso. Muchas gracias
- responder
Enviado por Flismas (no verificado) el Vie, 10/06/2006 - 16:54.Hola. Me han encantado tus explicaciones, hasta yo que no soy nada entendida en el tema lo he sacado. Muchisimas gracias! Solo queria preguntarte si existe la posibilidad de harcelo con otra imagen y c
- responder
Enviado por raquel (no verificado) el Mié, 11/15/2006 - 07:55.Hola, he le
- responder
Enviado por Marco Antonio Gir (no verificado) el Mar, 01/23/2007 - 14:38.Hola, esta todo muy bien, pero tengo un problema:Yo no trabajo con css, entonces como puedo hacer transparente un menu utilizando solamente javascript
- responder
Enviado por Martin (no verificado) el Mié, 05/23/2007 - 11:15.buenas esta bien el menu pero lo baje y no hace el efecto que presentan ustedes como se puede arreglar yo tengo internet explorer si pueden hacer el favor de responder
- responder
Enviado por sergis (no verificado) el Mié, 06/13/2007 - 10:32.hola los archivos me funcionan correctamente, pero necesito tener mas espacio entre los menus, ya que tengo un espacio de 746px. para poner 4 botones
- responder
Enviado por MaPaU (no verificado) el Lun, 06/18/2007 - 15:28.hola los archivos me funcionan correctamente, pero necesito tener mas espacio entre los menus, ya que tengo un espacio de 746px. para poner 4 botones
- responder
Enviado por MaPaU (no verificado) el Lun, 06/18/2007 - 16:25.Esta malo el menu, no se super pone a objetos como combo box ... todo mal ... se que es un bug del iexplorer pero se puede solucionar con codigo ...
saludos cabrones
- responder
Enviado por Anonymous (no verificado) el Mié, 07/09/2008 - 15:58.Hola, Muy bueno el menu... el unico problema lo tiene con el explorer... no se ven bien los submenus... quisiera saber si hay una solucion para eso... Muchisimas gracias muy bueno enserio! saludos
- responder
Enviado por raulte (no verificado) el Mar, 08/26/2008 - 14:31.Ya se que es un poco tarde para responder a los ultimos comentarios, pero no he visto el post hasta hace poco.
Para que se vea bien en IE7 hay que quitar la propiedad left:auto del css. (Donde pone li>ul{top:auto;left:auto;} dejar li>ul{top:auto;} )
- responder
Enviado por Craswer (no verificado) el Vie, 09/05/2008 - 02:52.Hola..me parecio excelente el menu, no soy una expeta en esto, y hasta ahora estoy empezando.mi problema es que no encuentro como adaptar el menu a una aplicacion que tengo, mejor dicho donde tengo 4 botones de seleccion y necesito que solo uno de ellos me arroje un menu, si alguno me pude ayudar en eso..se lo agradeceria. Saludos
- responder
Enviado por Paola (no verificado) el Jue, 06/21/2007 - 14:43.oye me gustaro ambos menus, pero no puedo quitarle la cabecera #header{ width:100%;background-color:white; no-repeat;height:126px;}y que funciones correctamente en explorer, en mozilla funciona correctamente, pero como le quito la cabecera, ya que me ocupa todos ese espacio
- responder
Enviado por indalecio (no verificado) el Jue, 06/28/2007 - 11:05.Hola! Tu blog es estupendo, te explicas de miedo! gracias por compartir conocimientos :) .Estoy probando esto del menu horizontal y de pronto me he topado con un problema que no consigo resolver y no encuentro nada por internet... a ver si a ti se te ocurre algo!Con este menu que tu has puesto si le pones por ejemplo 10 elementos a una de las opciones del menu y al desplegarse llega hasta donde hay un select o combo, como prefieras, el menu se queda por debajo del select!!! ¿por que? La unica propiadad que se en css que maneja posicionamiento (de que cosa enciama de que otra ) es el z-index pero lo he probado y no me resuelve nada..Bueno, puedas ayudarme o no... enhorabuena por la pagina!!!
- responder
Enviado por Amelie (no verificado) el Jue, 08/23/2007 - 01:28.Hola! la verdad es que esta genial pero tengo un problema, cuando pasa de cierta longitud... es decir al tener una lista por ejemplo con 6 links, al pasar el raton hacia abajo para intentar hacer click en en link k kiero, llega un momento ke el menu se corta. Creo que es algo parecido a lo ke le pasa a Amelie. por favor urge!! >o<Muchas gracias por todo tu trabajo, No tardé ni dos minutos en registrarme! sigue asi! Besos desde españa
- responder
Enviado por Lidia (no verificado) el Vie, 08/31/2007 - 00:50.alquien sabe como ponerle menus hijos a los submenus
- responder
Enviado por inda (no verificado) el Jue, 09/13/2007 - 13:54.Hola. No encuentro en ninguna parte como hacer que los desplegables sea tambien en horizontal, alguien sabe como puedo hacerlo??Gracias.
- responder
Enviado por Carmen (no verificado) el Mar, 10/23/2007 - 02:45.No funciona bien con el Explorer, al menos con el IE7.El submenu desplegable no aparece justo debajo sino a continuacion de la ultima letra de su men
- responder
Enviado por Chris (no verificado) el Dom, 01/13/2008 - 08:44.Me baje el codigo fuente y no queda igual, el pinche se menu se desplega de lado.
- responder
Enviado por Miguel Guerrero (no verificado) el Mié, 01/30/2008 - 12:03.No funciona igual en FireFox que en IE, en IE el menu se desplega de lado en FireFox se ve mucho mejor el menu.Un saludo
- responder
Enviado por Armando (no verificado) el Mié, 01/30/2008 - 12:07.Deja tu comentario