Menús con efectos

Este no será un post muy explicativo porque no hay mucho que explicar. Se trata de dos scripts muy livianas creadas por leigeber.com que permiten crear menúes desplegables con un efecto de fade y que funcionan bastante bien en cualquier navegador. Un script lo usamos para crear menues horizontales y el otro, menues verticales.

Para los menúes horizontales podemos usar este ZIP que incluye un demo aunque lo único necesario es el archivo dropdown.js que alojaremos en una servidor y cargaremos antes de </head>

<script type="text/javascript" src="URL_dropdown.js"></script>

Luego, incluiremos el CSS que podrá variar de acuerdo a nuestros gustos, pero algunas de las propiedades principales son estas:

<style type="text/css">
.dropdown {
float:left;
padding-right: 5px;
}
.dropdown dt {
width:125px;
cursor:pointer;
}
.dropdown dt:hover {
}
.dropdown dd {
display: none;
opacity: 0;
overflow: hidden;
position: absolute;
width: 200px;
z-index: 200;
}
.dropdown ul {
list-style: none;
margin: 0;
padding: 0 0 0 10px;
width: 200px;
}
.dropdown li {
display:inline;
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
display:block;
padding:5px;
width:170px:;
}
.dropdown a:hover {
}
</style>

Para usarlo, debemos armar una lista donde cada item tendrá un código similar a este:

<dl class="dropdown">
<dt id="nombre-ddheader" onmouseover="ddMenu('nombre',1)" 
onmouseout="ddMenu('nombre',-1)">Texto del menú</dt>
<dd id="nombre-ddcontent" onmouseover="cancelHide('nombre')" 
onmouseout="ddMenu('nombre',-1)">
<ul>
<li><a href="URL_item1">Item 1</a></li>
<li><a href="URL_item2">Item 2</a></li>
<li><a href="URL_item3">Item 3</a></li>
<li><a href="URL_item4">Item 4</a></li>
</ul>
</dd>
</dl>

Pueden tenerse tantos de estos bloque como sea necesario y sólo debemos tener en cuenta que el ID sea diferente para cada uno de ellos.

Para crear un menú vertical podemos usar este otro ZIP que también incluye un demo y donde todo lo necesario es el archivo flyout.js que alojaremos en una servidor y cargaremos antes de </head>

<script type="text/javascript" src="URL_flyout.js"></script>

Luego, incluiremos el CSS que es similar al anterior, la única variante es que en lugar de definir la clase dropdown como flotante:

.dropdown { /* para el menú horizontal */
float:left;
padding-right: 5px;
}

la definimos como un bloque y establecemos su posición como relativa:

.dropdown { /* para el menú vertical */
display: block; 
position:relative
}

El resto es exactamente igual.