Création
d'entreprise

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']); 
?>
Publié par avion-f16 - Dernière mise à jour le 28 avril 2010 à 19:51 par @ntoine
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.
Suggestions
  •  Menu sous forme de liste déroulante
  •  Liste déroulante dans EXCEL (Résolu) » Meilleure réponse: données validation liste 19.6;5.5;2.1
  •  Utiliser un menu sous forme de liste » Bonjour chers Amis, Est-ce que quelqu'un peut m'expliquer ou me proposer une document sur la manière de faire une liste déroulante comme menu? Par exemple au passage de la souris sur un article du menu, qu'on puisse voire les sous-articles et...
  •  Menu liste déroulante html (Résolu) » Meilleure réponse: voici un exemple de liste déroulante dynamique en html et Javascript (j'ai enlevé toutes les décalrations de doctype, css...). En fonction du choix dans une première liste, unes seconde liste est générée automatiquement Bon courage P.S.
  •  Liste déroulante avec saisie semi automatique pour EXCEL » Fiches pratiques : C'est une procédure qui demande un investissement personnel et qui n'est pas nécessairement facile à comprendre et à réaliser dès la première fois. Afin de rendre cette astuce facile à utiliser, nous allons employer les plages et les formules...
  •  Les formulaires HTML » Articles : Intérêt d'un formulaire Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains...
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?
Javascript - Créer une popup
Javascript - Changer un "bonjour" en "bonsoir" et inversement