Menú Horizontal Desplegable con efecto de Transparencia

baluart28 Abril 2005 - 12:00pm 39 comentarios
Enviar por Email Imprimir

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

Imagen de Paola
Paola

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

Imagen de indalecio
indalecio

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 

Imagen de Amelie
Amelie

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

Imagen de Lidia

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

Imagen de inda
inda

alquien sabe como ponerle menus hijos a los submenus

Imagen de Carmen
Carmen

Hola. No encuentro en ninguna parte como hacer que los desplegables sea tambien en horizontal, alguien sabe como puedo hacerlo??Gracias.

Imagen de Chris
Chris

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

Imagen de Miguel Guerrero
Miguel Guerrero

Me baje el codigo fuente y no queda igual, el pinche se menu se desplega de lado.

Imagen de Armando
Armando

    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 

Páginas

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más