Menu drop-down

Dezembro 2016


Veja um script para que você possa fazer um menu drop-down ("cai para baixo").

Quando o usuário selecionará um item desta lista, ele será redirecionado para o endereço correspondente.
Exemple de liste déroulante


Para colocar no cabeçalho da sua página (entre <head> e </head>) :

<script type="text/javascript">  
window.onload = function() {  
 formulário = document.getElementById('form_url');  
   
 formulário.onsubmit = function() {  
  if(this.elements[0].value != "") {  
   document.location.href = this.elements[0].value;  
  }  
 };  
   
 formulário.elements[0].onchange = function() {  
  if(this.value != "") {  
   document.location.href = this.value;  
  }  
 };  
};  
</script>

O seguinte deve ser posto no seu conteúdo, lá onde você quer que a lista esteja (este script já foi concluído com alguns exemplos):
<form action="redirection.php" methode="post" id="form_url">  
 <p>  
  <label for="url">Menu :</label>  
  <select name="url" id="url">  
   <option value="">Escolha:</opção>  
   <option value="index.html">Início</opção >  
   <option value="news.html">As notícias</ opção >  
   <option value="contact.html">Nos contatar</opção >  
  </select>  
  <input type="submit" value="Ok" />  
 </p>  
</form>
Este script é muito fácil de personalizar, e você deveria entender o princípio rapidamente.

Para não prejudicar aqueles que não ativaram o JavaScript (embora sejam raros), você pode criar uma página chamada "redirection.php" contendo isto:
<?php  
header('Location: '.urldecode($_GET['url']);  
?>



Tradução feita por Lucia Maurity y Nouira

Veja também

Publicado por pintuda. Última modificação: 4 de junho de 2011 às 11:43 por pintuda.
Este documento, intitulado 'Menu drop-down', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.