Menu drop-down

Janeiro 2017


Menu drop-down

Eis um script que permite fazer um menu drop-down ( que abre sub menus ao passar, ou clicar com o mouse em cima : faz aparecer um sub-menu). Quando o internauta seleciona um elemento da lista, ele será redirecionado para o endereço correspondente.



À colocar no cabeçalho de sua página (entre <head> e </head>) :
<script type="text/javascript">    
window.onload = function() {    
 formulaire = document.getElementById('form_url');    
     
 formulaire.onsubmit = function() {    
  if(this.elements[0].value != "") {    
   document.location.href = this.elements[0].value;    
  }    
 };    
     
 formulaire.elements[0].onchange = function() {    
  if(this.value != "") {    
   document.location.href = this.value;    
  }    
 };    
};    
</script>

O seguinte script é para ser colocado em seu conteúdo, lá onde você deseja ver a lista (este script já foi completado 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="">Choisissez :</option>    
   <option value="index.html">Accueil</option>    
   <option value="news.html">Les news</option>    
   <option value="contact.html">Nous contacter</option>    
  </select>    
  <input type="submit" value="Ok" />    
 </p>    
</form>
Este script é muito simples para adaptar, e você compreenderá o príncipio..

A fim de não penalizar aqueles que não ativaram Javascript (mesmo que sejam raros), você pode criar uma página chamada "redirecionamento.php" contendo isto :
<?php    
header('Location: '.urldecode($_GET['url']);    
?>


Veja também

Artigo original publicado por . Tradução feita por ninha25. Última modificação: 24 de agosto de 2010 às 03:12 por ninha25.
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.