O objetivo que buscamos neste exercício é realizar uma barra de navegação desdobrável, implementada com DHTML e programada em Javascript. O menu terá vários links e se mostrarão outros ao passar o mouse por cima. Existe uma primeira parte deste artigo, que deve ser lida antes que este. Ver a primeira parte do artigo.

Ocultar as camadas com um atraso

Para que o menu seja realmente útil, as camadas devem ser mostradas ou ocultadas de modo que se permita ao usuário acessar aos links das molduras e clica-los comodamente. Para isso, temos que fazer com que as camadas das molduras se ocultem com certo atraso, para que ao se sair de um link não se oculte imediatamente a camada, e sim que o faça passado um tempo suficiente para que o usuário possa operar com o menu.

Por resumir um pouco, estas seriam as funcionalidades que desejaríamos para o menu:

• Se colocarmos o mouse sobre um link principal, deve-se mostrar a camada com a moldura correspondente. Ao mesmo tempo, se houver alguma outra moldura visível, deve ser ocultado. Também se deve anular qualquer ação planificada de ocultar a camada da moldura associada. A função que faz isto a chamamos mostra_coloca().
• Se retirarmos o mouse de um link principal, deve-se ocultar a camada com a moldura correspondente. Porém, esta ação deve se executar com um atraso. Chamamos à esta ação com a função oculta_atraso().
• Se colocarmos o mouse sobre uma moldura, deve-se evitar que essa moldura se oculte. Para isso, anularemos qualquer ação, que pudesse estar planificada com atraso, que pretenda ocultar a camada sobre a que estamos situados. Esta ação se executa com a função mostra_atraso().
• Se saímos de uma camada com uma moldura planificaremos, com um atraso, a ação de ocultar essa camada. Corresponde também com a função oculta_atraso().

Veremos agora as camadas com as chamadas aos eventos que executam estas funções:

<table align="center" cellspacing="10">
<tr>
<td><div id=ancora1 class=ancora><a href="#" onmouseover="mostra_coloca('l1')" onmouseout="oculta_atraso('l1')">Link 1</a></div></td>
<td><div id=ancora2 class=ancora><a href="#" onmouseover="mostra_coloca('l2')" onmouseout="oculta_atraso('l2')">Link 2</a></div></td>
<td><div id=ancora3 class=ancora><a href="#" onmouseover="mostra_coloca('l3')" onmouseout="oculta_atraso('l3')">Link 3</a></div></td>
<td><div id=ancora4 class=ancora><a href="#" onmouseover="mostra_coloca('l4')" onmouseout="oculta_atraso('l4')">Link 4</a></div></td>
</tr>
</table>

<div id="l1" class=molduras onmouseover="mostra_atraso('l1')" onmouseout="oculta_atraso('l1')">
<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 onmouseover="mostra_atraso('l2')" onmouseout="oculta_atraso('l2')">
<a href="#" class=linksbarra>link 2.1</a>
<br>
<a href="#" class=linksbarra>link 2.2</a>
</div>
<div id="l3" class=molduras onmouseover="mostra_atraso('l3')" onmouseout="oculta_atraso('l3')">
<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="l4" class=molduras onmouseover="mostra_atraso('l4')" onmouseout="oculta_atraso('l4')">
<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>
</div>

O script Javascript para realizar todas essas ações é o seguinte. Ainda existem bastantes detalhes que ver para poder entender tudo.

<script type='text/javascript'>
var empezar = false
var ancoras = new Array ("ancora1","ancora2","ancora3","ancora4")
var camadas = new Array("l1","l2","l3","l4")
var atraso
var ocultar

function mostra(camada){
xShow(camada);
}
function oculta(camada){
xHide(camada);
}
function posiciona (){
for (i=0;i<capas.length;i++){
posx= xOffsetLeft(ancoras[i])
posy= xOffsetTop (ancoras[i])
xMoveTo(camadas[i],posx,posy+20)
}
}

window.onload = function() {
posiciona()
comecar = true
}
window.onresize = function() {
posiciona()
}

function mostra_coloca(camada){
if (comecar){
for (i=0;i<camadas.length;i++){
if (camadas[i] != camada) xHide(camadas[i])
}
clearTimeout(atraso)
xShow(camada)
}
}

function oculta_atraso(camada){
if (comecar){
ocultar =camada
clearTimeout(atraso)
atraso = setTimeout("xHide('" + ocultar + "')",1000)
}
}

function mostra_atraso(ind){
if (comecar){
clearTimeout(atraso)
}
}
</script>

A variável "comecar" indica se se deve começar o movimento de camadas. Pode ser que a página não tenha terminado de carregar e que ainda as camadas não tenham se posicionado corretamente. Utilizaremos esta variável boleana dentro das funções, que não farão nada se não for verdadeira.

O array "ancoras" contém uma referência a cada uma das camadas ancora. Introduzimo-las dentro de um array para poder fazer um acesso seqüencial a cada camada.

O array "camadas" contém uma referência a cada uma das camadas moldura.

A variável "atraso" salva uma referência à ação planejada de ocultar uma camada. Utilizaremos esta variável para eliminar as ações planejadas. É uma variável global porque desejamos utiliza-la desde várias funções.

A variável "ocultar" salva o nome da camada que se deseja ocultar. É uma variável global porque desejamos que seu valor se conserve embora saímos da função que a utiliza.

A função posiciona() agora utiliza o array de camadas ancora e molduras para situar as molduras na posição indicada. Como tem que posicionar todas as molduras, faz com que um loop FOR percorra todos os elementos do array de camadas.

A função mostra_coloca() recebe a camada que tem que se mostrar. Primeiro faz um percorrido para ocultar todas as camadas e logo mostra a que recebe por parâmetro. Também anula qualquer ação planejada de ocultar uma camada, com a função clearTimeout() à que lhe passa a variável "atraso".

Por sua parte, oculta_atraso() recebe a camada que deve se ocultar, porém com um atraso. Primeiro, introduz na variável global "ocultar" o nome da camada. Anula qualquer ação de ocultar uma camada e logo cria, por meio da função setTimeout() outro planejamento para ocultá-la ao cabo de um segundo. Se a variável "oculta" não fosse global, ao sair desta função se perderia o nome da camada que havia que ocultar.

Por último mostra_atraso() simplesmente elimina qualquer ação planejada de ocultar uma camada, com a função clearTimeout() à que lhe passa a variável "atraso".

Podemos ver o exemplo desenvolvido em uma página a parte.

Conclusão

Com isto terminamos um menu DHTML avançado, que tratamos de simplificar ao máximo. Não se esqueça que para que funcione é necessário primeiro obter bibliotecas, as X-Library em Cross-Browser.com e inclui-las logo na página desenvolvida.

Há que dizer que este sistema não é tão simples para uma pessoa que não tenha certa experiência no manejo de camadas e Javascript. Não vimos nada novo que não se possa aprender com algum dos artigos de CriarWeb.com.

Espero que as explicações tenham sido claras e que seja possível completar e entender o exercício sem maiores problemas.