Veamos cómo se puede hacer el típico menú DHTML de enlaces que, al pasar el ratón por un encima de los link, muestra en una capa inferior otra lista de enlaces vinculados. Estos menús son bastante habituales en páginas web. Sin ir más lejos, DesarrolloWeb.com utiliza o ha utilizado una barra de enlaces similar. Son muy útiles para concentrar una gran cantidad de vínculos en poco espacio, aunque muchas veces resultan poco claros para usuarios sin mucha experiencia.

Veremos cómo crear este menú apoyándonos en las librerías DHTML X-Library, que ofrecen funcionalidades muy útiles para programar scripts que se funcionan correctamente con todos los navegadores. Estas librerías se comentan en el artículo Cross-browser, DHTML compatible con todos los navegadores.

Podemos ver el resultado final del script en una página aparte, para aclaranos perfectamente sobre lo que queremos obtener.

Cómo encarar el problema

Hemos dividido este desarrollo en dos bloques, que podremos ver uno detrás de otro para poder entender mejor el ejercicio. En el primer bloque explicaremos la creación de las capas, su posicionamiento y la funcionalidad para ocultarlas y mostrarlas según pasamos el ratón sobre los links.

En la segunda parte veremos cómo hacer para que las capas se oculten con un retardo suficiente para que el usuario pueda utilizar cómodamente el menú.

Creación y posicionamiento de las capas

Primero vamos a mostrar un pequeño CSS que utilizaremos para dar estilo a página y las capas.

<style type="text/css">
body {font-family:verdana,arial;font-size:12pt;margin-top:15px;}
.recuadros {background-color:ffffcc; color:22cc44; border-style:solid; border-color:666666; border-width:1px; visibility:hidden; font-family:verdana,arial; font-size:12pt;}
.enlacesbarra {color:226655; text-decoration:none;}
.ancla {position:relative;visibility:visible; background-color:ffffcc}
</style>

La clase ".recuadros" sirve para definir el estilo de los rectángulos de enlaces emergentes. Nos fijamos que su visibilidad inicial es hidden, para que no se muestre cuando se carga la página.

Por otra parte, la clase ".enlacesbarra" define el estilo de los enlaces que hay dentro de los recuadros y "ancla" define el estilo de las capas que contienen los enlaces principales, que hay en la parte de arriba.

Referencia: Tenemos un manual de Hojas de Estilo en Cascada, muy útil si no entiendes la sintaxis de la declaración CSS anterior.

Hay 4 enlaces principales y 4 recuadros con enlaces asociados. Los enlaces principales, que se encuentran distribuidos horizontalmente en la parte de arriba de la barra de navegación, deben mostrar justo debajo su recuadro de enlaces relacionados, al pasar el ratón por encima.

Las capas de los recuadros se deben colocar debajo de los enlaces horizontales o principales. Si tenemos en cuenta que nuestros visitantes pueden tener distintas definiciones de pantalla y también tamaños de ventana distintos, podremos deducir que los enlaces horizontales no siempre tienen que quedar colocados en el mismo sitio de la página. Por tanto, estamos obligados a colocar los recuadros asociados en función de la posición en la que hayan quedado los enlaces principales.

Para ello, vamos a crear una serie de capas "ancla", que almacenan cada uno de los enlaces horizontales. Utilizaremos las propiedades de posicionamiento de las capas ancla para colocar en el lugar correcto a sus recuadros asociados. Las capas ancla tienen posicionamiento relativo, que quiere decir que se colocan en el lugar donde se hayan incluido dentro del código HTML.

Nota: Consultar el artículo Problema con el posicionamiento absoluto de capas para obtener más información sobre posicionamiento absoluto y relativo y cómo esas capas ancla pueden ayudarnos.

El código de las capas ancla es el siguiente. Tiene incrustado unos manejadotes de eventos Javascript de los que hablaremos luego.

<table align="center" cellspacing="10">
<tr>
<td><div id=ancla1 class=ancla><a href="#" onmouseover="muestra('e1')" onmouseout="oculta('e1')">Enlace 1</a></div></td>
<td><div id=ancla2 class=ancla><a href="#" onmouseover="muestra('e2')" onmouseout="oculta('e2')">Enlace 2</a></div></td>
<td><div id=ancla3 class=ancla><a href="#" onmouseover="muestra('e3')" onmouseout="oculta('e3')">Enlace 3</a></div></td>
<td><div id=ancla4 class=ancla><a href="#" onmouseover="muestra('e4')" onmouseout="oculta('e4')">Enlace 4</a></div></td>
</tr>
</table>

Por otra parte, para crear las capas de los recuadros, vamos a utilizar un código como sigue. El posicionamiento que hemos incluido en un principio es bastante indiferente, porque luego variaremos su posición dinámicamente con Javascript, en función de las capas ancla.

<div id="e1" class=recuadros style="position:absolute;left:85px;top:13px;">
<a href="#" class=enlacesbarra>enlace 1.1</a>
<br>
<a href="#" class=enlacesbarra>enlace 1.2</a>
<br>
<a href="#" class=enlacesbarra>enlace 1.3</a>
</div>
<div id="e2" class=recuadros style="position:absolute;left:85px;top:31px;">
<a href="#" class=enlacesbarra>enlace 2.1</a>
<br>
<a href="#" class=enlacesbarra>enlace 2.2</a>
</div>
<div id="e3" class=recuadros style="position:absolute;left:85px;top:49px;">
<a href="#" class=enlacesbarra>enlace 3.1</a>
<br>
<a href="#" class=enlacesbarra>enlace 3.2</a>
<br>
<a href="#" class=enlacesbarra>enlace 3.3</a>
<br>
<a href="#" class=enlacesbarra>enlace 3.4</a>
<br>
<a href="#" class=enlacesbarra>enlace 3.5</a>
<br>
<a href="#" class=enlacesbarra>enlace 3.6</a>
</div>
<div id="e4" class=recuadros style="position:absolute;left:85px;top:67px;">
<a href="#" class=enlacesbarra>enlace 4.1</a>
<br>
<a href="#" class=enlacesbarra>enlace 4.2</a>
<br>
<a href="#" class=enlacesbarra>enlace 4.3</a>
<br>
<a href="#" class=enlacesbarra>enlace 4.4</a>

Javascript para posicionar, ocultar y mostrar las capas

En principio, se debe incluir la librería X-Library, en la que nos vamos a apoyar para hacer el ejercicio.

<script type='text/javascript' src='../x/x_core.js'></script>

Luego veremos el código Javascript que hemos incluido por nuestra parte.

<script type='text/javascript'>
function muestra(capa){
xShow(capa);
}
function oculta(capa){
xHide(capa);
}
function posiciona (){
posx= xOffsetLeft("ancla1")
posy= xOffsetTop ("ancla1")
xMoveTo('e1',posx,posy+20)
posx= xOffsetLeft("ancla2")
posy= xOffsetTop ("ancla2")
xMoveTo('e2',posx,posy+20)
posx= xOffsetLeft("ancla3")
posy= xOffsetTop ("ancla3")
xMoveTo('e3',posx,posy+20)
posx= xOffsetLeft("ancla4")
posy= xOffsetTop ("ancla4")
xMoveTo('e4',posx,posy+20)
}
window.onload = function() {
posiciona()
}
window.onresize = function() {
posiciona()
}

</script>
<body>

Las funciones muestra() y oculta() reciben la capa que se desea mostrar u ocultar y simplemente llaman a la función de la librería para realizar la acción correspondiente.

La función posiciona() es la que hace el trabajo de colocar las capas con los recuadros justo debajo de los enlaces horizontales que tenían las anclas. Se obtiene la posición del ancla y a continuación se mueve la capa correspondiente al recuadro asociado a esa posición. Se le suman 20 pixel a la posición vertical para que la capa del recuadro quede debajo del ancla.

Luego se definen dos comportamientos para los eventos onload y onresize, que corresponden con la carga de la página o la acción de cambiar el tamaño de la ventana del navegador. En ambos casos se llama a la función posiciona() para colocar los recuadros en el lugar correcto.

Ahora, para acabar con esta parte del ejercicio, podemos fijarnos en los manejadores eventos que hemos colocado en los enlaces principales. Cuando se coloca el ratón por encima de un enlace, se debe mostrar la capa con el recuadro asociado. Cuando se retira el ratón del enlace principal, se debe ocultar la capa con su recuadro asociado.

Hasta este punto hemos realizado un ejercicio que se puede ver y probar. Aun nos faltan algunas cosillas que mejorar para que sea un menú perfectamente funcional, pero podemos ver ya algún resultado.

En la segunda parte del artículo explicaremos las modificaciones que tenemos que hacer en el Javascript para que el navegador desplegable quede totalmente funcional. Ver la segunda parte del artículo.