Seção JavaScript da abcDICAS.com.br

HTML
Dicas de Uso para a Construção de Páginas Web


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 selecionada 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 seção <HEAD> ... </HEAD>, enquanto a chamada à função deve ser colocada no local adequado, e portanto dentro do corpo da página - dentro da seçã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://www.superdicas.com.br">PORTAL DAS DICAS
</SELECT></FORM>
</CENTER>
......
.....
</BODY>

Comentários:

a. no comando SELECT pode-se utilizar endereços absolutos ou relativos;
b. limite a lista à no máximo 20/25 opções, para evitar problemas com o tamanho da tela;
c. perceba que a primeira opção faz uma chamada vazia (VALUE=""), pois serve apenas para garantir que o comando onChange possa funcionar com a primeira opção válida (que é a 2ª da lista) - o comando onChange só opera se o usuário MUDAR a opção selecionada, e se a 1ª opção fosse uma válida, jamais poderia ser utilizada;
d.

Quer ver um exemplo real ? - então volte ao menu da seção JavaScript,
lá coloquei um JavaScript similar à este, que permite visitar cada página desta seção.


PESQUISA ON-LINE:
Vote em nossa Enquete OnLine

Atenção: não temos condição de dar suporte direto para todos os visitantes; use nosso Super Fórum Web Design para poder enviar suas dúvidas. O registro é gratuito!
Para um suporte diferenciado use o nosso Clube do Help Desk.


| Suporte | Cadastro | Consultoria | Quem Somos |