logo xgarreau.org Quoi ma tête ?
xavier@xgarreau.org
Javascript : Menus déroulants
Version imprimable

Cette page est un réponse à un mail sur le site qui méritait bien une page en ligne.
Comme cette personne, n'hésitez pas à faire part de vos problèmes, je réponds généralement rapidement.


Bonjour,
Comme promis je réponds à ta requête. Il est vrai que ma partie javascript mériterait d'être étoffée mais en ce moment, je n'ai plus trop le temps. Ca reviendra. En plus je préfère répondre aux mails, c'est plus vivant.

Alors, les menus déroulants en javascript :
Je suppose que tu veux faire un menu dont le contenu est fixé d'avance, qui te permette de renvoyer les utilisateurs sur la page correspondant à leur choix dans le menu, soit en cas de relachement du menu, soit en cas d'appui sur un bouton situé non loin.

  1. Création du menu
  2. Tu insères le menu en html en utilisant les balises <form>, <select> et <option> :

    • <form> définit un formulaire
    • <select> définit un élément de formulaire, liste qui peut être déroulant ou non.
    • <option> définit les "lignes"/choix de ta liste

    Pour avoir une liste à un endroit, de ta page tu écrit :

    <form>
      <select size=1>
        <option selected>
        <option>choix 1
        <option>choix 2
        <option>choix 3
        etc...
      </select>
    </form>
    

    Notes :

    • size=1 : définit le nombre de choix de la liste visibles à la fois. 1 ligne = liste déroulante.
    • Il y a un <option> vide, c'est pour qu'il n'y ait rien de selectionné au début.
    • Le selected permet de spécifier le choix sélectionné par défaut.
    • Le texte placé après la balise <option> est celui que voit l'utilisateur dans la liste.

  3. Lien entre les adresses et les choix visibles à l'écran.
  4. Pour faire la relation entre le choix affiché et la page correspondante, tu utilises l'attribut value de la balise <option>, dans laquelle tu place l'adresse/url en absolu ou relatif de la page visée, càd :
    <form>
      <select size=1>
        <option value="" selected>
        <option value="http://une.url.absolue/">choix 1
        <option value="une/url/relative/">choix 2
        <option value="">
        <option value="http://perso.club-internet.fr/xgarreau/">A l'Aide !
        ...
      </select>
    </form>
    
    Notes :
    • Voilà le lien est fait entre les choix et les adresses.
    • Tu peux insérer des choix ne renvoyant sur rien en mettant value="" dans la balise <option>

  5. La redirection.
  6. Rappels sur le javascript :
    • Il s'écrit entre balises <script> et </script>.
    • On le place par exemple entre les balises <head> et </head> de la page html. Pour changer l'adresse courante, on utilise
    • document.location="nouvelle.adresse";
    • nomduFrame.location="nouvelle.adresse"; dans le cas d'une utilisation avec des cadres/frames. nomduFrame peut être :
    • top --> Toute la fenêtre
    • self ou document --> cadre courant
    • parent --> cadre ayant ouvert la fenêtre dans laquelle se trouve la liste
    • un vrai nom de frame/cadre
    Pour la suite, je partirai du principe qu'on utilise document.location
    <script>
    function chLoc(laListe) {
      lUrl = laListe.options[laListe.selectedIndex].value;
      if (lUrl) document.location=lUrl;
      return true;
    }
    </script>
    
    Notes :
    • On écrit une fonction, qui prend en paramètre la liste déroulante
    • On stocke l'attribut value de la balise <option> selectionnée
    • On vérifie que ce dernier contient bien une adresse.
    • Si oui, on y va.
    • On renvoie true pour signaler que tout c'est bien passé.

  7. La totale
  8. Pour faire le lien entre la fonction et la liste, on détecte le changement de choix dans la liste. C'est un évènement onChange (lors du changement, littéralement), à placer dans la balise <select>.
    Voici donc un document minimum contenant une liste.

    <html>
    <head>
    <title>Titre de la page</title>
    <script>
    function chLoc(laListe) {
      lUrl = laListe.options[laListe.selectedIndex].value;
      if (lUrl) document.location=lUrl;
      return true;
    }
    </script>
    </head>
    <body>
    <form>
      <select size=1 onChange="return chLoc(this);">
        <option selected value="">
        <option value="http://www.altavista.com/">alta vista
        <option value="http://www.xgarreau.org/">A l'Aide
        <option value="">---
        <option value="../../cg/internet/">Démystifions internet
        <option value="../../ppa/blender/">Blender
      </select>
    </form>
    </body>
    </html>
    
    Notes :
    • En paramètre, on passe this, l'objet courant.

    Rendu :

  9. La variante avec bouton :
  10. <html>
    <head>
    <title>Titre de la page</title>
    <script>
    function chLoc(laListe) {
      lUrl = laListe.options[laListe.selectedIndex].value;
      if (lUrl) document.location=lUrl;
      return true;
    }
    </script>
    </head>
    <body>
    <form name=leFormulaire>
      <select name=laListe size=1>
        <option selected value="">
        <option value="http://www.altavista.com/">alta vista
        <option value="http://www.xgarreau.org/">A l'Aide
        <option value="">---
        <option value="../../cg/internet/">Démystifions internet
        <option value="../../ppa/blender/">Blender
      </select>
      <input type=button onclick="return chLoc(leFormulaire.laListe);" value="Go !">
    </form>
    </body>
    </html>
    
    Notes :
    • J'ai attribué des noms au formulaire et à la liste pour qu'il soit plus facile d'y faire référence.
    • L'évènement déclencheur est maintenant un onClick sur le bouton.
    • La référence à la liste est maintenant leFormulaire.laListe, en effet this représenterait ici le bouton...

    Rendu :

    Auteur : Xavier GARREAU
    Modifié le 17.07.00

Votre avis dans le forum.

Zazou Projets

Développement

Utilisation et culture

Ailleurs

Vieilleries

Bonne parole

Partenaire



Ce site existe depuis le 01/02/2003
Pour rapporter un bug : xavier@xgarreau.org.
Hébergement : Maneya.
Essayez ZazouMiniWebServer !
Votre avis dans le forum.