Réalisation d'un menu déroulant

Il vous arrivera peut-être un jour de manquer cruellement de place sur une page d'accueil. Il sera alors nécessaire de scinder celle-ci en plusieurs parties : rubriques, sous-rubriques, etc ... afin de faciliter la navigation sur votre site. Cette solution ne satisfait toutefois pas tout le monde et, à l'instar de certains portails qui tentent d'installer tous les titres sur une seule et même page, il vous restera deux choix : faire une page sans fin où l'ascenseur devra faire défiler une page démesurément longue ... ou un, voire plusieurs menus déroulants.

Cette technique est très simple à mettre en oeuvre et un exemple de son application peut se voir ci-dessous :

Faites votre choix dans la liste suivante :

Cliquez sur les titres proposés : chacun correspond à une page. Pour la fermer, cliquez sur le "X" se trouvant dans le coin supérieur droit. Je sais, ce n'est pas une solution très élégante mais ces pages sont empruntées à mon site et ... elles n'étaient pas prévues à l'origine pour cette démonstration. Voyez plus bas pour adopter une solution plus ... professionnelle.

Cet évènement fait appel à la même balise que les formulaires dont vous avez pu voir la description dans une autre page. Elle est toutefois réduite à sa plus simple expression puisqu'il s'agit ici uniquement de l'ouverture d'un champ de saisie qui, au lieu d'enregistrer un choix dont le résultat sera envoyé au serveur, ouvrira la page choisie par le visiteur. Comment ? Tout simplement en installant des liens pour chacun de ces choix ...

En voici les scripts ...

Tout d'abord la définition de la fonction d'ouverture de la page, ensuite la boucle permettant le choix dans un index à installer dans le corps de la "boite" de menu et enfin l'ouverture d'une fenêtre qui contiendra la page appelée :

<SCRIPT LANGUAGE="JavaScript">

function ouvrir() {

var index=document.forms[0].elements[0].options.selectedIndex;

if (index>0) {

var choix=document.forms[0].elements[0].options[index].value;

window.open(choix,"","");

}

}</SCRIPT>

Retenez essentiellement que :

ouvrir sera la fonction définie pour ... l'ouverture de la fenêtre contenant la page.

choix sera la variable qui déclenchera ... le choix de cette page grâce à la liaison à un lien.

vous pouvez attribuer différents paramètres à la fenêtre qui s'ouvrira : voir la page "pop-up".

ce script sera inséré en tête de la page de menu, dans les balises <HEAD>.

La suite, à savoir le menu proprement dit, sera inséré à l'endroit choisi, dans le <BODY> :

<CENTER><FONT FACE="Arial" COLOR="black"><FORM ACTION="" METHOD=POST>

<P><SELECT NAME="" onchange="ouvrir()">

<OPTION>Différentes rubriques et pages disponibles :

<OPTION VALUE="bases1.htm">1 - Les bases pour créer un site Web

<OPTION VALUE="scripts2.htm">2 - Entrer dans Javascript et Html

<OPTION VALUE="scripts3.htm">3 - Gadgets utiles et futiles

<OPTION VALUE="couleurs.htm">4 - Principales couleurs en langage clair

<OPTION VALUE="bogues.htm">5 - Bogues de Claris Home Page 2

<OPTION VALUE="logigra1.htm">6 - Liens vers les téléchargements

<OPTION VALUE="refman1.htm">7 - Liste des moteurs et annuaires

<OPTION VALUE="#">etc.........etc.........etc..........etc.........

</SELECT>

</FORM></FONT></CENTER>

Titres et adresses sont naturellement ceux de mon exemple : vous y installerez les vôtres.

en rouge, vous devez le savoir maintenant, vous indiquerez les paramètres d'écriture de texte (fontes, etc).

en vert, la définition donnée à cette commande dans le Javascript, fera ouvrir la nouvelle fenêtre.

en bleu, vous indiquerez les adresses des pages qui correspondent aux titres se trouvant à leur droite.

vous n'oublierez surtout pas de fermer la balise <FORM> !

Afin de permettre la fermeture de la fenêtre, le visiteur cherchera un bouton ou un lien ... de fermeture. Certains "néo-surfeurs" ne savent pas que le "X" du coin supérieur droit peut être utilisé pour fermer une pop-up et risquent de chercher en vain une échappatoire. Ne les paniquez donc pas et installez ce bouton ou ce lien, dont l'adresse sera alors écrite ainsi :

<A HREF="javascript:top.close()">Cliquez ici pour sortir</A>

Une fenêtre d'alerte apparaîtra automatiquement, lui demandant confirmation de son choix.

Voilà ... Que dire d'autre sinon que vous pourrez naturellement embellir ce ou ces menus déroulants en leur attribuant un choix de couleurs, des fontes de texte différentes, en les installant dans un cadre, en attribuant les nombreux paramètres possibles dans les pop-up, etc ... Laissez aller votre imagination mais n'exagérez toutefois pas en installant une batterie de menus dans une seule page ! Comme toujours, simplicité et fonctionnalité sont des marques de qualité. Ne l'oubliez pas !