10. Menu tipo Drop-DownPara conseguir diminuir uma página-índice que tenha uma lista grande de opções, o uso de um script bem compacto, baseado na avaliação de um campo SELECT dentro de um FORM, é uma ferramenta bastante eficaz. Esse JavaScript lança mão de uma função definida pelo usuário (MeuMenu()) que coloca numa variável, aqui chamada URL, o endereço da opção seleccionada no FORM pelo usuário. À esta variável pode-se atribuir um endereço absoluto completo, isto é: " http://www....... ", ou então um endereço relativo dentro de um site, do tipo " reler.htm " ou " ../compras/detalhes.htm ". Para conseguir apresentar essa informação, basta colocar os dois blocos abaixo descritos, sendo que o script deve ser colocado dentro da secção <HEAD> ... </HEAD>, enquanto a chamada à função deve ser colocada no local adequado, e portanto dentro do corpo da página - dentro da secção <BODY> ... </BODY>. Parte 1 - Código Javascript: <HEAD>
.....
<SCRIPT LANGUAGE= "JavaScript ">
<!-- Inicio
function MeuMenu(){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
// Fim -->
}
</SCRIPT>
.......
</HEAD> Parte 2 - Chamada ao Código Javascript: <BODY>
....
......
<CENTER>
<FORM name = " form ">
<SELECT NAME= "site " SIZE=1 onChange = "MeuMenu() ">
<OPTION VALUE= " ">Selecione um Endereço....
<OPTION VALUE= "http://www.yahoo.com ">Yahoo
<OPTION VALUE= "http://www.metacrawler.com ">Metacrawler
<OPTION VALUE= "http://www.altavista.digital.com ">Altavista
<OPTION VALUE= "http://www.webcrawler.com ">Webcrawler
<OPTION VALUE= "http://www.lycos.com ">Lycos
<OPTION VALUE= "http://users/sti.com.br/helpdesk ">PORTAL DAS DICAS
</SELECT></FORM>
</CENTER>
......
.....
</BODY> | 
