O leitor já deve ter sentido necessidade de dar dinamismo e agilidade ao seu website. Pois fique desde já a saber que se deve apostar num menu bastante dinâmico e flexível, pois ele é o veículo que vai conduzir cada cibernauta pela rede do seu sítio. Se colocar links atafulhados e desorganizados no seu menu, então é provável que os visitantes desistam após consultarem somente uma página.

   Por outro lado, se apresentar um índice sóbrio e bem estruturado, terá muito maiores probabilidades de este ser usado pelos utilizadores e, consequentemente, aumentar os seus registos de tráfego. Agora a escolha é sua! Continuar com um menu estático e menos apelativo? Ou trocá-lo por um que lhe proporcione um aumento dos seus rendimentos?

   Se a sua escolha for a acertada (a segunda), então este artigo interessa-lhe, pois descreve esquematicamente, e de forma o mais sucinta e compreensível possível, um processo de criação de menus dinâmicos para colocar no seu Website. O código é em Javascript, pois neste caso uma linguagem de programação do lado do cliente só traz vantagens, pois aumenta a rapidez da aplicação.

Veja um exemplo do seguinte código em acção!

   Antes de converter o seu menu, dedique algum tempo para pensar numa possível organização dos links. Uma proposta é separá-los por temas diferenciados, como por exemplo: ?Desporto?, ?Cinema?, ?Teatro?, etc.. De seguida, introduza em cada grupo aqueles que achar adequados ao contexto. Organize os grupos por ordem decrescente de interesse, estando os mais relevantes no topo da página e os menos interessantes em último lugar. Assim, as hiperligações de topo terão mais visibilidade e chamarão mais cibernautas. Findo este processo, pode começar a converter o seu menu.

   Antes de mais, deve copiar e colar o seguinte código em Javascript no início do site, pois é ele que vai gerir o seu índice de hiperligações.

<script>
var arrayX = new Array ();
var flagX = new Array ();

function treeWatch(id)
{
switch (flagX[id])
{
case "0":
document.getElementById ("subfolder"+id).innerHTML = "";
flagX[id]="1";
break;
   
case "1":
document.getElementById ("subfolder"+id).innerHTML = arrayX[id];   
flagX[id]="0";
break;
}
}
</script>

   Este código está dividido em duas secções que são delimitadas pelo ?switch?: ou o grupo está visível, ou não está visível. Se o valor da lista for ?0? então o código vai ocultar a parte do menu em foco. Se o valor, por outro lado, for ?1?, nesse caso o script irá mostrar a secção pretendida.
   Agora só falta definir o que deseja tornar dinâmico no seu menu e se essa parte deve aparecer oculta, logo de início, ou não.
   Nesse sentido, deve colocar a informação da seguinte forma:

<script>arrayX[y] = ?códigoHTML?; flagX[y] = "1";</script>

Onde se lê y, deve colocar a ordem em que deseja que apareça a secção. Se quiser introduzir um certo tema em primeiro lugar, tem de colocar no campo y o valor 0. De forma geral, para colocar em ordem n, deve-se indicar o valor n-1.

<script>treeWatch ('visibilidade');</script>   

Por outro lado, se desejar que aquele campo deve ser visível à partida, coloque o valor de ordem relativo ao bloco desejado (por exemplo, para activar o 3º bloco, deve introduzir ?2? onde se lê ?visibilidade?). Se desejar que o bloco apareça omisso de início, não coloque a linha de código anterior.
Para finalizar, só falta colocar o seguinte código HTML onde desejar que a secção apareça.

<img src=?URLimagem? onclick=?treeWatch('y')? />
<font id="subfoldery"></font>

Uma vez mais, o valor y refere-se à ordem em que a secção aparece no menu. Os valores de y devem ser sempre iguais para o mesmo bloco. Por outro lado, o objecto ?img?, ou seja, a imagem, tem um evento ?onclick? que vai mostrar ou esconder (assim que seja clicado) o bloco do menu correspondente. Uma nota breve para referir que não é estritamente necessário que o objecto seja uma imagem. O essencial é implementar algures num objecto o evento onclick=?treeWatch('y')?.
Só um aparte para referir que este script já está desenhado no sentido de ser integrado com outras linguagens de programação do lado do servidor. Só para dar uma ideia... Se desejar que certa secção fique activa após um clique específico num certo link, então basta colocar o seguinte código (exemplo em PHP):

<script>treeWatch ('<?=$varVisibilidade?>');</script>

Agora que já possui um menu dinâmico, regozije-se com o seu tráfego a subir!

Veja um exemplo do código em acção!