10.1 - Menu de Opções

Alguns "sites" na Web apresentam uma relação das seções organizadas numa lista de escolha, onde ao selecionar uma das opções relacionadas, a página respectiva é carregada automaticamente.

Estude o exemplo:

Javascript - Menu Apresentação do menu do site de outra forma


Menu:

cujo código se encontra apresentado abaixo:

<html>
<head>
<title>Javascript - Menu</title>
</head>

<body>
Apresentação do menu do site de outra forma
<FORM NAME="menu">
Menu:
<SELECT NAME="choice" onChange="self.location.href=document.menu.choice.options[document.menu.choice.selectedIndex ].value">
<OPTION VALUE="menu.htm">Selecione a seção onde deseja ir..
<OPTION VALUE="http://www.nce.ufrj.br"> NCE
<OPTION VALUE="http://www.if.ufrj.br"> Instituto de Física
</OPTION>
</SELECT>
</FORM>
</body>

</html>

Para adaptar o exemplo para sua homepage basta mudar as linhas:

<OPTION VALUE="endereço">Descrição</OPTION>
O parâmetro VALUE deve conter o endereço real da página (seja local ou na web) e o texto entre os elementos <OPTION> e </OPTION>, uma descrição ou título da seção ou da página.

No elemento </SELECT>, caso use quadros, você deve alterar o início do parâmetro onChange de "self.location.href=..." para "top.location.href=..." se deseja que a seleção ocupe a tela toda do navegador; e "top.frameX.location.href=..." se a seleção for carregada em outro frame de nome frameX.

Note que a primeira linha do parâmetro <OPTION> tem uma frase genérica do tipo selecione ..., porque o programa não funciona para a primeira linha, pois ela já está selecionada ao carregar a página.