Créer des menus déroulants

Activez le bouton Barre gauche !

Intéressant, n'est-ce pas !

Activez maintenant le bouton Fermeture ! Sachant que de telles barres de navigation nommées aussi menus déroulants peuvent être désormais affichées en n'importe quel endroit de la page, vous comprendrez aisément tous les avantages de cette technique. De plus, elle ne vous demandera que la simple application de quelques règles déjà vues dans les pages précédentes plus l'utilisation de notre petit JavaScript préféré déjà utilisé dans d'autres applications ... !

Ah, bon ... vous n'avez pas étudié cette rubrique en commençant par le début ? Soit ... La barre de navigation supérieure comporte un bouton (lien) nommé JavaScript. Activez-le, étudiez la page sur laquelle vous attérirez puis revenez ici : vous comprendrez alors facilement comment faire.

...................

Ca y est ? Votre lanterne est désormais éclairée ?
Alors, tout est dit ... ou presque : quelques détails à ajouter et vous pourrez vous y mettre.

Voyons dans l'ordre comment vous y prendre :

• Ecrivez le JavaScript en tête de votre page ou dans une feuille [.js] externe (en installant naturellement , toujours en tête de page le lien vers celle-ci !).
• Créez une feuille de style comme celle qui a servi d'exemple à cet exposé.
• Ajoutez-y les règles d'un calque nommé barreg (par exemple), à l'instar du calque barresup mais destiné à être affiché verticalement et à gauche de la page.
• Ajoutez-y la règle de style visibility:hidden.
• Créez une série de calques de même largeur que le bouton appbarr mais sans y inclure la règle float:left : elle est inutile.
• Ecrivez en guise de lien pour appbarr <a href="javascript:affiche ('barreg')"> et pour le dernier calque (identifié sous le nom fermer, par exemple) le lien <a href="javascript:efface ('barreg')">
• Ecrivez le code d'affichage de ces calques dans la page HTML en les dissociant (comme pour barresup) du calque page. Dans l'exposé que vous suivez ici, barresup, barreg et leurs "boutons" associés sont écrits en fin de page : voyez en code source, si vous avez une hésitation.

Voilà : c'est terminé. Installez du "contenu" dans votre calque page, installez aussi vos liens dans les faux boutons, enregistrez et admirez le résultat : à l'appel de la page, la barre gauche n'apparaît pas SAUF si vous activez le lien Barre gauche. C'est bien l'éffet recherché ... Si tel n'est pas le cas, que vous préférez maintenir cette barre de navigation en permanence, il vous suffit d'éliminer la règle visibility:hidden dans celles destinées à l'affichage de barreg et d'oublier le JavaScript.

Rappelez-vous que vous pouvez utiliser cette technique à n'importe quel endroit de la page : au sommet, à gauche, à droite, en pied de page, au centre, etc ... : votre imagination et vos besoins de création seront le moteur de vos réalisations.

Ah ! Oui ... ! Une dernière chose : si vous ne l'avez pas compris (mais à ce stade de connaissances, ce serait décourageant !), il est bien évident que TOUTES vos pages ayant un ou plusieurs liens vers celle-ci (qui sera la vôtre, évidemment) doivent comporter la même structure ! Gare aux liens morts et aux pages "sans sortie" !