Dans cette section, vous apprendrez à créer un menu déroulant automatique. En effet, il est en général nécessaire d'avoir un bouton pour confirmer notre choix, ce qui peut devenir agaçant. C'est pourquoi nous vous montrerons ici comment faire pour éviter ce désagrément.


  1. Faites-vous un plan de votre menu:
    Titre dans le menu Fichiers directions
    Choix 1 Page_choix1.htm
    Choix 2 Page_choix2.htm
    Choix 3 Page_choix3.htm
    Choix 4 Page_choix4.htm
    Choix 5 Page_choix5.htm

    Note: Si je choisis par exemple le choix 1, je me retrouverai sur la page Page_choix1.htm qui est le fichier direction du choix 1.

  2. Si vous comptez faire plus d'un menu dans la même page, refaites le nombre de plans nécessaires.
  3. Placez votre curseur dans l'en-tête de la page qui contiendra un ou des menu(s) déroulant(s) (entre <HEAD> et </HEAD>.
  4. Copiez le texte suivant:
    <SCRIPT language="JavaScript">

    function MakeArray()
    {
    var lngth = MakeArray.arguments.length;
    for ( i = 0 ; i < lngth ; i++ ) { this[i]=MakeArray.arguments[i] }
    }

    function switch_page1() {
    var select = eval(document.menuform1.language.selectedIndex);
    if( (select > 0) && (select < 8) ) {
    var intl=new MakeArray('',
     'page_choix1.htm',
    'page_choix2.htm',
    'page_choix3.htm',
    'fpage_choix4.htm',
    'page_choix5.htm'    );
    location=intl[document.menuform1.language.selectedIndex];}}
    </SRCIPT>


    Note: Vous pouvez ajoutez des choix en ajoutant les nom des fichiers directions entre apostrophes et en séparant ceux-ci par des virgules
  5. Remplacez les nom de fichiers Page_choix?.htm par les noms de vos fichiers directions.
  6. Si vous comptez mettre plus d'un menu déroulant, recopiez le nombre de fois nécessaires le texte à partir "function switch_page jusqu'à la fin et changez tous les 1 par des 2 ou des 3 ou...
  7. Allez maintenant placer votre curseur à l'endroit où vous voulez qu'il y ait un menu.
  8. Copiez le texte suivant: <FORM NAME="menuform1">
    <tr><td><SELECT NAME="language"
    onChange="switch_page1();" ALIGN="LEFT">
    <OPTION SELECTED>---     Titre du menu ---
    <OPTION>    Choix 1
    <OPTION>Choix 2
    <OPTION>Choix 3
    <OPTION>Choix 4
    <OPTION>Choix 5
    </SELECT></td></tr></FORM>
  9. Remplacer le 1 de menuform1 par le numéro du menu correspondant.
  10. Remplacez le texte "Titre du menu" par le titre de votre menu.
  11. Remplacer le texte "Choix ?" par les options de votre menu. Vous pouvez mettre autant d'options que vous le désirez.
  12. Ne reste plus qu'à le tester!

Exemple


Revenir au menu principal
Dernière mise à jour : 4 août 1998