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", );<BR> }<BR> }<BR> }<BR>}<BR>}<BR>window.onload=startList;</P></CODE>
<P>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 <<CODE>li>, al cargar la página la función starList se ejecuta.</CODE></P>
<P><CODE>Ahora, sólo nos falta el efecto de tranparencia, para ello utilizamos las css styles:</CODE></P><CODE>
<P>body{margin:0;padding:0; text-align:center; background-color:#993333;}<BR>#main{width:780px;<BR>position:absolute;margin-left:-370px;left:390px;<BR>/* posición del nav */<BR>text-align:center;}<BR>#header{ width:100%;background:url(header.jpg) no-repeat;height:126px;}<BR><CODE>/*
Menú de Navegación
*/<BR></CODE><CODE>#nav{margin:0;position:absolute;top:10px;right:30px; <BR>/*margen con el div */}<BR>#nav li{color:#FFFFFF;<BR>/*color base del texto*/ float:left;width:11em;margin:0;padding:0;<BR>list-style:none;background:transparent;font:11px Verdana,Tahoma,Helvetica,Sans-serif;text-align:center;position:relative;cursor:default;}<BR>#nav li ul{padding-top:7px; <BR>/* referente a la parte superior */ <BR>margin:0;}<BR>#nav a{text-decoration:none;}<BR>#nav li a{ color: #FFFFFF; font-weight: bold;}<BR>#nav li a:hover{text-decoration:underline;}<BR>#nav li li a:hover{text-decoration:none;}<BR>#nav li li{filter:Alpha(opacity=50,finishopacity=50,style=1);<BR>/* Transparencia en Internet Explorer */}<BR>#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;}<BR>#nav li li a:hover{color:#000000;background:transparent url(navhover.png) 0px 0px repeat scroll;<BR>/* Transparencia en Otros navegadores */}<BR>li ul{padding:0.5em 0 1em 0;display:none;position:absolute;top:100%;left:0;}<BR>li>ul{top:auto;left:auto;}<BR>li li{float:left;border:0;display:block;<BR>background:transparent;}<BR>li:hover ul,li.over ul{display:block;}</CODE></P></CODE>
<P><CODE>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.</CODE></P>
<P><CODE>Para ver el resultado pulsa <A title="Menú Horizontal Desplegable Tranparente" href="http://www.baluart.net/ejemplos/art31/menu-horizontal-desplegable.html" target=_blank><STRONG><FONT color=#dc7e1e>aquí.</FONT></STRONG></A> <BR>Para descargar el código e imagenes pulsa <A title="Descargar menuHorizontal" href="http://www.baluart.net/sesion/descargas.php" target=_blank><STRONG><FONT color=#dc7e1e>aquí</FONT></STRONG></A>.</CODE></P>""
