10. Menu tipo Drop-Down
Para 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> |
