Menús deplegables

Published: at 12:00 AM

Para aquellos interesandos en los menús desplegables, aquí os cuento como los hago yo. Puede que no sea la mejor manera, si que sea original, pero a mi me funciona bien, es un método bastante rápido de integrar en la página, que funciona bien con todos los navegadores modernos (y no tan modernos), se degrada correctamente si eliminamos la hoja de estilos, y eso sí, necesita de Javascript para funcionar. Asi que para asegurar la accesibilidad del sitio deberemos disponer de una forma alternativa de acceso al contenido.

Yo lo veo como una vía de acceso rápida a las secciones interiores de la web, pero que si no la tenemos (por estar desactivado el javascript), todavía podemos navegar por toda la web. Veamos el resultado final, y luego vayamos a por los ingredientes:

¿Qué necesitamos?

La idea es que las capas estarán ocultas por defecto, y con un evento onmouseover se hagan visibles o no, según pasamos por el menú. Desde la hoja de estilos controlaremos su posición, colores, fuentes, etc.

Estas capas estarán siempre posicionadas de forma absoluta, así quedarán flotando invisibles sobre nuestra página. Como vamos a realizar el diseño para una resolución de 800×600, comenzaremos creando un contenedor para nuestro código. Lo prepararemos centrado, tal y como expliqué anteriormente en mi post centrado con CSS, quedándonos un código xhtml tal que así para empezar a escribir:

<body>
<div id="#contenedor">

</div>
</body>

Normalmente procuro que las capas del desplegable estén claramente separadas en el código, además hay que tener en cuenta que si un lector usa un agente de usuario sin soporte para hojas de estilo, o con éstas desactivadas, el menú aparecerá allá donde lo hayamos escrito, o sea que para que no moleste yo lo incluiría al final de todo, justo antes de cerrar nuestra capa contenedor.

Veamos el código de las capas:

<div id="about" onmouseover="activar();"
onmouseout="retardo();" style="visibility:hidden; z-index:1">
   <a href="#">Enlace 1</a>
   <a href="#">Enlace 2</a>
</div>
<div id="productos" onmouseover="activar();"
onmouseout="retardo();" style="visibility:hidden; z-index:1">
   <a href="#">Enlace 3</a>
   <a href="#">Enlace 4</a>
</div>

Una cosa a tener en cuenta para que luego sea todo más sencillo. Por un lado tendremos que asignar un selector ID a cada capa, y crear una función de javascript para activarla/desactivarla. Por comodidad, llamaré igual a la función de javascript que a la capa (en este caso about y productos.

Los vínculos los escribiremos uno tras otro, puesto que en la hoja de estilos los trataremos como bloque.

Ahora vemos nuestra función de javascript:

var t;

function activar() {
clearTimeout(t);
}


function ocultar_submenus() {
var capa1 = document.getElementById(Â’aboutÂ’);
capa1.style.visibility = “hidden”;
var capa2 = document.getElementById(Â’productosÂ’);
capa2.style.visibility = “hidden”;
}


function about() {
activar();
ocultar_submenus();
var capa = document.getElementById(Â’aboutÂ’);
capa.style.visibility = “visible”;
}


function productos() {
activar();
ocultar_submenus();
var capa = document.getElementById(Â’productosÂ’);
capa.style.visibility = “visible”;
}


function retardo() {
t=setTimeout(Â’ocultar_submenus()Â’,800);
}

Con la función retardo podemos controlar el tiempo que tardan en desaparer los desplegables, en milisengundos.
Ahora crearemos una lista que nos servirá de menú padre que llama a los desplegables, activándolos mediante el evento onmouseover:

<ul>
   <li><a href="index.html">Inicio</a></li>
   <li><a href="about.html" onmouseout="retardo();"
onmouseover="about();">About</></ali>
   <li><a href="productos.html" onmouseout="retardo();"
onmouseover="productos();">Productos</a></li>
</ul>

Ya sólo nos quedará añadir unas líneas a nuestra hoja de estilos controlando la posición y representación de los desplegables.

/*  =MENUS DEPLEGABLES ****************************** */

#about, #productos {
position: absolute;
left: 120px;
top: 55px;
border: 1px solid #369;
background: #ededed;
}


#productos {
top: 80px;
}


#about a, #productos a {
display:block;
padding: 3px;
margin:2px;
width: 125px;
color: #333;
}

Para ver el resultado final, podéis ver este ejemplo de menús desplegables con su código detallado.

Agradecimientos: Josevi por el código javascript, y Gerard por las mejoras.