Como criar uma caixa drop-down com links

Escrito por craig witt | Traduzido por milene hermenegildo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar uma caixa drop-down com links
Crie uma lista drop-down usando HTML e JavaScript (laptop image by Ewe Degiampietro from Fotolia.com)

A maioria dos sites apresentam itens de navegação usando blocos de opções que ficam tanto na parte superior da página ou em um de seus lados. Como estas estruturas de navegação apresentam todas as opções disponíveis, elas oferecem uma grande quantidade de informações. No entanto, elas também ocupam um espaço considerável na tela. Designers com uma quantidade limitada de espaço podem optar por usar menus drop-down contendo uma lista de itens que só se expande quando selecionada. Crie esse tipo de estrutura de navegação em sua página web usando HTML e JavaScript.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra a página e visualize seu código. Se você usar um editor de texto, basta abrir a página no editor e selecionar a linha de código onde deseja acrescentar o menu drop-down. Se você usar um editor visual (por exemplo, o Adobe Dreamweaver ou o Microsoft Expression Web) abra a página e clique no local da página onde deseja que o menu drop-down apareça. Após fazer isso, mude o modo de visualização para exibir o código HTML que determina o conteúdo e a aparência de sua página.

  2. 2

    Pressione a tecla "Enter" para criar uma linha em branco.

  3. 3

    Copie e cole o seguinte código na linha em branco:

    <form name="link"> <select name="menu"> <option selected>Selecione seu link</option> <option value="http://www.exemplo.com/">Site de exemplo 1</option> <option value="http://www.exemplo.com/">Site de exemplo 2</option> <option value="http://www.exemplo.com/">Site de exemplo 3</option> </select> <input type="button" onClick="location=document.link.menu.options[document.link.menu.selectedIndex].value;" value="Go"> </form>

  4. 4

    Modifique os parâmetros do link para atender às necessidades do projeto. Digite o texto padrão no topo da lista modificando o valor logo após <option selected>. Altere a URL de cada item subsequente, ajustando o parâmetro de valor correspondente. Substitua "Site de exemplo" com o texto do link desejado. Você também pode substituir o texto contido no parâmetro de valor <input> para modificar o texto que aparece no botão "Enviar".

  5. 5

    Salve sua página e depois abra-a no seu navegador. Selecione uma opção da lista drop-down e, em seguida, clique no botão ao lado para acessar o item selecionado.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível