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

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

Imagen de saludos
saludos

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

Imagen de Balu

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

Imagen de Flismas
Flismas

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

Imagen de raquel
raquel

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

Imagen de Marco Antonio Gir
Imagen de Martin
Martin

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

Imagen de sergis
sergis

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

Imagen de MaPaU
MaPaU

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

Imagen de MaPaU
MaPaU

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

Imagen de Anonymous

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

Imagen de raulte
raulte

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

Imagen de Craswer
Craswer

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

Imagen de Anonymous
Anonymous

no funciona en opera

Imagen de Alexis Mejias
Alexis Mejias

Bien

Imagen de Veny
Veny

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}

Imagen de Jorge123
Jorge123

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

Imagen de saludos
saludos

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

Imagen de saludos
saludos

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

Imagen de Anonimo
Anonimo

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

Imagen de Anonymous
Anonymous

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

  • ) lista por ejemplo el color de letra.
    Gracias
  • Imagen de qwertyman
    qwertyman

    no puedo descargar el archivo =P

    Imagen de chicmul
    chicmul

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

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

    Imagen de luis_josue
    luis_josue

    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

    Imagen de poposklan
    poposklan

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

    Imagen de jes independencia financiera

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

    Saludos

    Imagen de igualada
    igualada

    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.

    Imagen de heensaga
    heensaga

    No me aparecen los links de descarga..

    Imagen de Jesus Juarez
    Jesus Juarez

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

    Imagen de rgalv
    rgalv

    A mi tampoco, hay que hacer algo más que registrarse?

    Páginas

    Dejar comentario

    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