Menu sous forme de liste déroulante

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']); 
?>
Cet article est régulièrement mis à jour par des experts sous la
direction de Jean-François Pillou, fondateur de CommentCaMarche
et directeur délégué au développement numérique du groupe Figaro.
Ce document intitulé « Menu sous forme de liste déroulante » issu de Comment Ça Marche (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.