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

imefisto

responder

29 Abril 2006 - 11:59am

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

saludos

responder

10 Septiembre 2009 - 12:41pm

Como hago para verlo sin los simbolos.. me c los he quitado pero en uno de ellos le quito o le pongo o le dejo coma o no c, como haogo

Balu

responder

30 Abril 2006 - 5:49am

Bienvenido a baluart... Las gracias a ti, por tus palabras.Saludos.

Flismas

responder

6 Octubre 2006 - 4:54pm

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

raquel

responder

15 Noviembre 2006 - 7:55am

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

Marco Antonio Gir

responder

23 Enero 2007 - 2:38pm

Hola, he le

Martin

responder

23 Mayo 2007 - 11:15am

Hola, esta todo muy bien, pero tengo un problema:Yo no trabajo con css, entonces como puedo hacer transparente un menu utilizando solamente javascript

sergis

responder

13 Junio 2007 - 10:32am

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

MaPaU

responder

18 Junio 2007 - 3:28pm

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

Veny

responder

5 Noviembre 2008 - 5:37am

Hola, he probado el menú y me funciona correctamente con todos los navegadores excepto IE (da igual la versión no funciona en ninguno) y he probado lo de cambiar li>ul{top:auto;left:auto;} por li>ul{top:auto;} pero sigue sin funcionar. Hice algunos cambios en el código para adaptármelo y puede ser que tocase algo y lo dejase mal. Te dejo el código tal y como lo tengo a ver si puedes miralo y ver el problema... la verdad te lo agradecería mogollón! Gracias!

/* CSS Document */

#main{width:800px;
/* posición del nav */
text-align: right;}
#header{ width:100%;background: url(../imagenes/header.jpg) no-repeat;height:60px;font-size:20px;}
/* -------- Menú de Navegación -------------------- */
#nav{
margin:0;
top:194px;
/*margen con el div */}
#nav li{
color: #FFFFFF;
/*color base del texto*/ float:left;
width:16em;
margin:0;
padding:0;
list-style: none;
background:transparent;
font:12px "Century Gothic";
text-align:center;
position:relative;
cursor:default;
}
#nav li ul{padding-top:0px;
/* referente a la parte superior */
margin:0;}
#nav a{text-decoration:none;}
#nav li a{ color: #FFFFFF; font-weight:lighter;}
#nav li a:hover{text-decoration:blink;}
#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{display:block; color:#FFFFFF; font-weight:normal;background:transparent url(../imagenes/nav.png) 0px 0px repeat scroll; line-height:18px;}
li:hover ul,li.over ul{ display: block;}
#nav li li a:hover{color:#FFFFFF;background:transparent url(../imagenes/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;}
.style1 {font-size: 16px}

Jesus Juarez

responder

26 Julio 2014 - 11:43am

Soy nuevo en la pagina y quiero descargar las imagenes y no me deja, tengo tambien una duda estoy usando asp.net con una pagina master y al momento que estoy utilizando me desconfigura la master y pone el fondo por completo rojo y solo lo genero en el contenedor algun consejo
gracias...

Jorge123

responder

5 Enero 2009 - 12:56pm

Hola tengo una consulta, ahí alguna forma de poder hacer que funcione esos filter con esos estilos y degradados en los demas navegadores?

saludos

responder

10 Septiembre 2009 - 11:56am

Caramba la verdad no se dond ni como guardar o ubicar o dar nombre a estos archivos gracias

saludos

responder

10 Septiembre 2009 - 11:57am

Saludos, de verdad no c como darle o ubicar estos archivos...ademas el codigo se presenta con signos y hay q quitarlos gracias

Anonimo

responder

6 Octubre 2009 - 9:50pm

Saludos, felicitaciones por el codigo bastante bueno y muy reducido, asi como agradable, vistozo, proligioso...

Anonymous

responder

27 Febrero 2010 - 12:52pm

hola alguin sabe si se puede cambiar solamente a un elemento de una (

) lista por ejemplo el color de letra.
Gracias

qwertyman

responder

15 Marzo 2010 - 9:07am

no puedo descargar el archivo =P

chicmul

responder

4 Mayo 2010 - 12:07pm

kanalithos no aprendi a kambiarle la imagen del encabezado si me pudieran
ayudar les agradeceria

-----------------------------------

luis_josue

responder

3 Diciembre 2010 - 12:19pm

HOLA XOY NUEVO EN PROGRAMACION Y ESTOY TRATANDO DE EMPAPARME O APRENDER COMO TRABAJAR CON JAVASCRIPT.. EN TODO CASO ME PARECE MUY INTERESANTE, QUISIERA APRENDER COMO INSERTAR LOS CODIGO JAVASCRIPT EN HTML

poposklan

responder

11 Julio 2011 - 7:24pm

muchas gracias estoy comenzando con la programacion en web y este tutorial me va a ayudar

jes independenc...

responder

19 Julio 2011 - 4:56pm

Muchas gracias por el codigo, lo estoy porbando, si tengo algun problema les pregunto..

Saludos

igualada

responder

20 Septiembre 2012 - 4:55am

hola,
el enlace a ell archivo .zip no funciona, quisiera saber donde encontrar las inmágenes ya que no me sale el menú trasparente y creo que necesiratía la imagen del ejemplo, gracias.

heensaga

responder

16 Octubre 2012 - 4:33pm

No me aparecen los links de descarga..

Alexis Mejias

responder

9 Octubre 2008 - 10:24am

Bien

Anonymous

responder

11 Septiembre 2008 - 7:49pm

no funciona en opera

Craswer

responder

5 Septiembre 2008 - 2:52am

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;} )

raulte

responder

26 Agosto 2008 - 2:31pm

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