Vejamos como se pode fazer o típico menu DHTML de links que, ao passar o mouse por cima dos links, mostra em uma camada inferior outra lista de links vinculados. Estes menus são bastante habituais em páginas web porque são muito úteis para concentrar uma grande quantidade de vínculos em pouco espaço, embora muitas vezes são pouco claros para usuários sem muita experiência.

Veremos como criar este menu apoiando-nos nas bibliotecas DHTML X-Library, que oferecem funcionalidades muito úteis para programar scripts que funcionam corretamente com todos os navegadores. Estas bibliotecas são comentadas no artigo Cross-browser, DHTML compatível com todos os navegadores.

Podemos ver o resultado final do script em uma página a parte, para clarear perfeitamente sobre o que queremos obter.

Como encarar o problema

Dividimos este desenvolvimento em dois blocos, que poderemos ver um atrás do outro para poder entender melhor o exercício. No primeiro bloco explicaremos a criação das camadas, seu posicionamento e a funcionalidade para ocultá-las e mostrá-las segundo passamos o mouse sobre os links.

Na segunda parte veremos como fazer para que as camadas se ocultem com um atraso suficiente para que o usuário possa utilizar comodamente o menu.

Criação e posicionamento das camadas

Primeiro, mostraremos um pequeno CSS que utilizaremos para dar estilo a página e as camadas.

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

A classe ".molduras" serve para definir o estilo dos retângulos de links emergentes. Observamos que sua visibilidade inicial é hidden, para que não se mostre quando se carrega a página.

Por outra parte, a classe ".linksbarra" define o estilo dos links que existem dentro das molduras e "ancora" define o estilo das camadas que contém os links principais, que existem na parte de cima.

Referência: Temos um manual de Folhas de Estilo em Cascata, muito útil se você não entender a sintaxe da declaração CSS anterior.

Existem 4 links principais e 4 molduras com links associados. Os links principais, que se encontram distribuídos horizontalmente na parte de cima da barra de navegação, devem mostrar justo debaixo sua moldura de links relacionados, ao passar o mouse por cima.

As camadas das molduras devem ser colocadas debaixo dos links horizontais ou principais. Se levarmos em conta que nossos visitantes podem ter diferentes definições de tela e também tamanhos de janela distintos, poderemos deduzir que os links horizontais nem sempre têm que ficar colocados no mesmo lugar da página. Portanto, estamos obrigados a colocar as molduras associadas em função da posição na qual tenham ficado os links principais.

Para isso, vamos criar uma série de camadas "ancora", que armazenam cada um dos links horizontais. Utilizaremos as propriedades de posicionamento das camadas ancora para colocar no lugar correto a suas molduras associadas. As camadas ancora têm posicionamento relativo, que quer dizer que se colocam no lugar onde estiver incluído dentro do código HTML.

Nota: Consultar o artigo Problema com o posicionamento absoluto de camadas para obter mais informação sobre posicionamento absoluto e relativo e como essas camadas ancora podem nos ajudar.

O código das camadas ancora é o seguinte. Tem incrustado uns administradores de eventos Javascript dos que falaremos logo.

<table align="center" cellspacing="10">
<tr>
<td><div id=ancora1 class=ancora><a href="#" onmouseover="mostra('e1')" onmouseout="oculta('e1')">Link 1</a></div></td>
<td><div id=ancora2 class=ancora><a href="#" onmouseover="mostra('e2')" onmouseout="oculta('e2')">Link 2</a></div></td>
<td><div id=ancora3 class=ancora><a href="#" onmouseover="mostra('e3')" onmouseout="oculta('e3')">Link 3</a></div></td>
<td><div id=ancora4 class=ancora><a href="#" onmouseover="mostra('e4')" onmouseout="oculta('e4')">Link 4</a></div></td>
</tr>
</table>

Por outra parte, para criar as camadas das molduras, vamos utilizar o seguinte código. O posicionamento que incluímos à princípio é bastante indiferente, porque logo variaremos sua posição dinamicamente com Javascript, em função das camadas ancora.

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

Javascript para posicionar, ocultar e mostrar as camadas

À princípio, deve-se incluir a biblioteca X-Library, na qual vamos nos apoiar para fazer o exercício.

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

Logo veremos o código Javascript que incluímos por nossa parte.

<script type='text/javascript'>
function mostra(camada){
xShow(camada);
}
function oculta(camada){
xHide(camada);
}
function posiciona (){
posx= xOffsetLeft("ancora1")
posy= xOffsetTop ("ancora1")
xMoveTo('e1',posx,posy+20)
posx= xOffsetLeft("ancora2")
posy= xOffsetTop ("ancora2")
xMoveTo('e2',posx,posy+20)
posx= xOffsetLeft("ancora3")
posy= xOffsetTop ("ancora3")
xMoveTo('e3',posx,posy+20)
posx= xOffsetLeft("ancora4")
posy= xOffsetTop ("ancora4")
xMoveTo('e4',posx,posy+20)
}
window.onload = function() {
posiciona()
}
window.onresize = function() {
posiciona()
}

</script>
<body>

As funções mostra() e oculta() recebem a camada que se deseja mostrar ou ocultar e simplesmente chamam à função da biblioteca para realizar a ação correspondente.

A função posiciona() é a que faz o trabalho de colocar as camadas com as molduras justo debaixo dos links horizontais que tinham as ancoras. Obtém-se a posição da ancora e a seguir move-se a camada correspondente à moldura associada a essa posição. Somam-se 20 pixels à posição vertical para que a camada da moldura fique debaixo da ancora.

Logo, definem-se dois comportamentos para os eventos onload e onresize, que correspondem com o carregamento da página ou a ação de mudar o tamanho da janela do navegador. Em ambos casos chama-se à função posiciona() para colocar as molduras no lugar correto.

Agora, para acabar com esta parte do exercício, podemos observar os administradores de eventos que colocamos nos links principais. Quando se coloca o mouse encima de um link, deve-se mostrar a camada com a moldura associada. Quando se retira o mouse do link principal, deve-se ocultar a camada com sua moldura associada.

Até este ponto realizamos um exercícoo que se pode ver e provar. Ainda nos faltam algumas coisinhas para melhorar para ser um menu perfeitamente funcional, porém já podemos ver algum resultado.

No próximo artigo explicaremos as modificações que temos que fazer no Javascript para que o navegador desdobrável fique totalmente funcional.