Menú Horizontal Desplegable con efecto de Transparencia

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:

<title>Menú Horizontal Desplegable</title>
<link rel="stylesheet" type="text/css" href="menuheader.css" />
<script type="text/javascript" src="menuheader.js"></script>

Luego creamos las capas del encabezado. Y dentro de estas la lista desordenada a la que identificamos como nuestro "menú de navegación", 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"

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 fuente e imágenes debes registrarte o iniciar sesión.

Comentarios

Paola

responder

21 Junio 2007 - 2:43pm

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

indalecio

responder

28 Junio 2007 - 11:05am

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

Amelie

responder

23 Agosto 2007 - 1:28am

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!!!

Lidia

responder

31 Agosto 2007 - 12:50am

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