07) Menus deroulants dynamiques graphiques
Ce tutorial vous présente une autre façon d'afficher vos liens, à la façon d'une liste déroulante mais beaucoup plus jolie...Plus graphique. Une visualisation de l'ensemble? Alors cliquez.
Attention, les liens dans les menus déroulants sont fictifs... sauf pour le mail.
Avant d'attaquer l'ensemble sous Dreamweaver, il nous faut construire nos images. Pour cela utilisez votre logiciel de dessin favori. Pour ma part, j'ai utilisé Photoshop. Construisez l'ensemble de votre menu, c'est à dire les titres mais également les menus déroulants. Découpez vos images pour en obtenir autant que vous possédez de menus plus une (les titres).
Voici mes différentes images placées sous les titres. Il me suffit maintenant de les découper et de les sauvegarder indépendamment.
Passons maintenant sous Dreamweaver.
Créez un calque  , et intégrez l'image comportant les titres.
Sur la palette calques, renommez le calque crée, cela vous permettra de vous y retrouver plus tard.
Personnellement, je l'ai nommé Titres.
Intégrez ensuite les autres images, celles concernant les menus déroulants. Positionnez-les aux endroits prévus grâce à vos calques.
Vous devriez avoir quelque chose comme cela:
Les menus déroulants sont positionnés aux endroits précis où ils doivent apparaîtrent.
N'oubliez pas de renommer les calques, car pour la suite cela nous servira...
C'est maintenant que cela se complique un peu. Il nous faut afficher le menu correspondant au titre survolé.
Dans la palette Calques, cliquez avec votre souris devant les différents menus. Un oeil fermé devra apparaître et votre calque devrait disparaître. Si vous avez un oeil ouvert, recliquez une nouvelle fois pour le fermer. Notre menu au départ est vide, c'est à dire que nos menus déroulants ne sont pas apparents et il faut donc les faire disparaître. Seuls nos titres sont apparents.
Sélectionnez votre image des titres et sur la palette Objets, sélectionnez l'outil zone réactive rectangulaire pour définir l'espace de survol sur votre titre.
Une zone de couleur bleue (par défaut) apparaît. Elle sélectionne la zone de clic.
Faites de même avec les autres titres.
Maintenant que nos différentes zone ont étés définies, il va falloir donner l'ordre au menu déroulant d'apparaître ou de disparaître.
Sélectionnez le premier rectangle (celui des ateliers). Affichez la palette des comportements et cliquez sur le  .
Dans le menu déroulant qui apparaît, sélectionnez Afficher- Masquer les calques.
Dans la boite de dialogue qui apparaît, vous apercevez tous vos calques. C'est cette boite qui va nous servir de faire apparaître ou disparaître le calque concerné.
Comme nous avons sélectionné la zone de sélection au-dessus du titre ateliers, nous allons faire apparaître le menu déroulant.
Pour cela, sélectionnez dans la boite de dialogue le calque ateliers puis cliquez sur le bouton afficher. Cliquez sur OK.
Dans la palette de comportement apparaît un événement associé à notre action (afficher le calque). Mais ce que nous voulons, c'est que lorsque nous passons avec la souris sur un des titres le menu concerné apparaisse. Cliquez alors sur la flèche à droite de OnLoad et dans la liste proposée, sélectionnez OnMouseOver (passage dessus).
Effectuez la même chose avec les autres titres. sélectionnez la zone de survol puis le comportement en ensuite l'évènement. Vous n'êtes pas obligé de sélectionnez OnMouseOver, vous pouvez utiliser OnClick.
Le fait de passer d'un menu à l'autre ouvre bien le deuxième menu mais n'efface pas le premier. Il vous faut donc lors de la sélection d'un menu (afficher) sélectionnez le masquage pour les autres menus.
Une fois que vous avez effectué toutes les actions, vous pouvez essayer votre menu déroulant dynamique graphique.
Pour créer des liens dans les menus déroulants, créez des zones de survol comme tout à l'heure, puis donnez lui le chemin de la page ou le site à ouvrir. Pour cela, sur la palette calques, sélectionnez le calque contenant le menu choisi, puis délimitez la zone. Dans le champ lien enlevez le dièse pour mettre votre nom de la page ou le nom du site à ouvrir. Si vous devez ouvrir une page dans des frames, n'oubliez pas de sélectionner la cible.
On pourrait améliorer ce menu en intégrant des images retournées pour chaque titre et menu, mais cela est une autre histoire et pourrait faire l'histoire d'un autre tutorial.
| 
