Menu
Donnez votre avis

Menu sous forme de liste déroulante

Posez votre question
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']); 
?>
Jean-François Pillou

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.

En savoir plus sur l'équipe CCM

Ajouter un commentaire

Commentaires

Commenter la réponse de Utilisateur anonyme