Está na moda incluir um navegador de website consistente em um campo desdobrável de formulário ou de caixa de seleção que, ao selecionar um de seus elementos, que se correspondem com seções do site, nos leve à seção que pretendemos visitar de maneira automática.

Pode ser visto a seguir um exemplo.

Seções e serviços de CriarWeb -------------------------------------- Portal Manuais Divulgação de páginas Programas Colaborar -------------------------------------- Entrar em contato Livro de visitas

Este tipo de controle possui várias vantagens, entre as quais podemos destacar:

• Ocupa pouco espaço na página
• Pode-se colocar quantas opções se desejar
• É uma ferramenta muito visual e prática
• É muito fácil de implementar

Passos a realizar:

Para conseguir um navegador assim em nossa página web devemos enfrentar uma tarefa que poderia ser dividida em duas partes. Por um lado, devemos criar um formulário que contenha a caixa de seleção desdobrável e por outro, um simples script que dê vida à caixa, ou seja, que prepare a caixa para que o navegador se dirija à página selecionada. Vamos ver separadamente cada um destes elementos.

Formulário

Custará da etiqueta <form> para abrir e fechar o formulário. Daremos um nome ("navegador") ao formulário para poder acessa-lo mais tarde usando Javascript.

Dentro do formulário colocaremos um único elemento: o campo de seleção múltipla desdobrável. Daremos um nome também ao campo ("secoes") para poder acessá-lo usando Javascript. Este campo conterá as diferentes opções que queremos que sejam apresentadas no menu desdobrável. Estas poderão ser seções de sua web ou também, páginas que estejam fora do site.

Vamos ver o código do formulário antes de continuar com a explicação:

<form name=navegador>
<select name="secoes">
<option value="no">Seções e serviços de CriarWeb
<option value="no">--------------------------------------
<option value="http://www.criarweb.com/">Portal
<option value="http://www.criarweb.com/manuais.asp">Manuais
<option value="http://www.criarweb.com/divulgacao">Divulgação de p&aacute;ginas
<option value="http://www.criarweb.com/contribue/">Colaborar
<option value="no">--------------------------------------
<option value="http://www.criarweb.com/contato/">Entrar em contato
<option value="http://www.criarweb.com/livro_visitas/">Livro de visitas
</select>
</form>

Se você observar, cada opção corresponde a uma das seções ou serviços de criarweb e está composta por duas partes importantes, a primeira corresponde com o atributo value da etiqueta <option>, que é igual à URL absoluta da página ao qual queremos nos dirigir. A segunda parte destacável corresponde com o nome que desejarmos que seja visto na caixa de seleção.

É também importante destacar que incluímos alguma opção que não quisemos que nos direcione a nenhum lugar. São opções para separar as seções dos serviços ou a primeira opção, para indicar que este menu desdobrável contém as seções e serviços de criarweb. As opções que não quisermos que nos levem a outra página são marcadas com um "no" em seu atributo value.

O script

Agora vamos ver qual é o script que utilizamos para animar este menu desdobrável. É muito simples, podemos vê-lo a seguir:

<script language=javascript>

function destino(){

url = document.navegador.secoes.options[document.navegador.secoes.selectedIndex].value

if (url != " no") window.location = url;

}

</script>

Basicamente é uma função que recupera o value da opção selecionada na caixa de seleção desdobrável e o armazena em uma variável chamada url. Posteriormente, se a variável url não contém a palavra "no", leva ao navegador à posição selecionada, ou seja, ao url que havíamos buscado. Lembrem que se marcávamos o value de uma opção a "no" é que não desejávamos que o navegador viajasse a outro endereço.

O evento OnChange

Isto não funcionaria se não vinculássemos o evento onchange da caixa de seleção à função destino que vimos agora pouco. O evento onchange se dispara quando se muda o valor selecionado dentro do menu desdobrável e devemos fazer com que chame a função destino. Para isso, na etiqueta <select> devemos incluir o seguinte atributo onchange="destino()". A etiqueta ficaria assim:

<select name="secoes" onchange="destino()">

Com tudo isto junto você já terá um bonito navegador desdobrável e, esperamos, a capacidade para personalizá-lo a seu gosto.

Mais uma coisa: se o seu site tem frames deverá ser feito algumas mudanças no script para que tudo funcione corretamente.