Menu sous forme de liste déroulante

Septembre 2016

Voilà un script vous permettant de faire un menu sous forme de liste déroulante.
Lorsque l'internaute choisira un élément dans cette liste, il sera redirigé à l'adresse correspondante.
Exemple de liste déroulante


À mettre dans l'entête de votre page (entre <head> et </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>

Le script suivant est à mettre dans votre contenu, là où vous souhaitez voir la liste (ce script est déjà complété par quelques exemples) :
<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>
Ce script est très simple à adapter, et vous devriez vite comprendre le principe.

Afin de ne pas désavantager ceux qui n'ont pas activer Javascript (bien qu'ils soient rares), vous pouvez créer une page nommée "redirection.php" contenant ceci :
<?php 
header('Location: '.urldecode($_GET['url']); 
?>

A voir également :

Ce document intitulé «  Menu sous forme de liste déroulante  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.