Des
menus déroulants en DHTML sous IE5 avec Dreamweaver 3
Débutant
Elaborer un menu déroulant à l'aspect tout ce qu'il y a de plus
professionnel (semblable, par exemple, à celui que l'on peut trouver
sur le site de Microsoft) n'a rien d'une
opération complexe nécessitant la maîtrise du Javascript ou la recherche
difficile d'une applet Java volumineuse. Avec Macromedia
Dreamweaver, l'éditeur WYSIWYG de pages HTML, il est possible
de réaliser ce type d'effet sans toucher une ligne de code (mais
sans garantir, certes, que le code produit soit optimal).
L'exemple que nous donnons ici a été testé sous Internet Explorer
5.0. Il nécessite d'importantes adaptations pour fonctionner sous
IE4 et Navigator 4.x. Nous faisons par ailleurs référence, dans
cet article, à la version en anglais de Dreamweaver 3.0.
Commençons par créer des calques (Insert, Layers) :
un calque pour la barre de menu, puis autant de calques que de menus
principaux, calques qui contiendront les sous-menus respectifs.
Nous nommerons ces différents calques, par exemple, « barre »,
« menu1 », « menu2 », « menu3 », etc
Le calque « barre » sera, par défaut, visible. Pour cela,
après avoir activé l'option View, Invisible Elements (par
le menu ou par Ctrl+Shift+I), cliquer sur « l'ancre »
du calque « barre » avec le bouton droit puis selectionnez,
dans le menu qui apparaît, Properties : dans la fenêtre
correspondante, régler le champ « Vis » à « visible ».
Les calques des sous-menus seront, quant à eux, par défaut invisibles :
réglez cette propriété en suivant la même procédure, mais en réglant
le champ « Vis » à « hidden ». Dans chaque cadre,
il est préférable de définir une table de la taille souhaitée pour
notre calque, mais cela n'est pas nécessaire. Des modifications
futures seront pourtant facilitées par ce moyen. Nous pouvons remplir
nos cadres avec les entrées de menu, soit sous forme de textes,
soit sous forme d'images contenant du texte (et qui permettent ainsi
des effets « rollover »). Dans les deux cas, on associera
à ces entrées les liens correspondant aux pages auxquelles elles
font référence. Il faut maintenant associer aux événements-utilisateurs
(ici, les événements onMouseOver et onMouseOut) l'affichage
ou non des calques de sous-menu. Pour cela, placez-vous sur le premier
menu (lien texte ou lien image, selon le cas), cliquez dessus et
appuyer ensuite sur F8 pour ouvrir la fenêtre des comportements.
Sélectionnez la case « + », puis, dans la liste qui apparaît,
le comportement ShowHideLayers. Une fenêtre apparaît alors,
listant tous les calques déjà définis. Vérifiez qu'il n'y a pas
d'erreur et cliquez ensuite sur l'entrée Layer « menu1 »
in layer « barre », puis appuyez sur le bouton Show.
Ensuite, choisissez, en cliquant (dans la fenètre des comportements)
sur l'événement associé par défaut au comportement que vous venez
de définir, l'événement onMouseOver. Sélectionnez de nouveau
la case « + », le comportement ShowHideLayers,
et l'entrée Layer « menu1 » in layer « barre »,
mais cette fois appuyez sur le bouton Hide. Ensuite, associez
à ce comportement l'événement onMouseOut. Procédez
de manière analogue pour chacun des autres menus. Avec cette méthode,
le passage de la souris sur l'un des textes (ou l'une des images)
de la barre de menu affichera le sous-menu correspondant. Lorsque
la souris quittera le texte en question, le sous-menu disparaîtra.
Pour pouvoir naviguer dans les sous menus, nous allons faire en
sorte que le calque de sous-menu "chevauche" légèrement
notre calque "barre". Ce chevauchement dépendra bien sûr
de la taille des calques et du type de menu choisi (texte ou image).
Alors nous allons définir pour chacun des calques
de sous-menu les comportements ShowHideLayers, Show (associé
à l'évènement onMouseOver) et ShowHideLayers,
Hide (associé à l'évènement onMouseOut).
Cet exemple est illustré ci-dessous (avec des menus textes), avec
quelques améliorations dans la présentation, notamment l'utilisation
d'une feuille de style combinée à la possibilité, décrite
par ailleurs, de réaliser des effets « rollover »
avec du texte. L'effet est alors tout à fait convaincant:
[Jérôme
Morlon 11
mars 2001 , JDNet]
|
