Cahiers Pratiques et Références

Cahier Dreamweaver : Atelier 5

Un menu dynamique à l'aide des comportements
Tous les articles Dreamweaver
Survol des sous-menus

Le menu s'affiche et disparaît automatiquement lors du survol de l'image qui lui correspond. Mais impossible encore de s'en servir : dès qu'on tente d'y accéder, il se dérobe… Et le pointeur n'est plus sur l'image !

Il nous faut redéfinir deux comportements Afficher-Masquer le calque :

  1. Sélectionnez l'image comprise dans le calque Menu Produits.

  2. Cliquez sur le bouton "+" de l'inspecteur de comportements et choisissez l'action Afficher-Masquer le calque.

  3. Choisissez le calque Menu Produits dans la liste et cliquez sur le bouton Afficher.

  4. Associez l'action que vous venez de définir à un événement onMouseOver.

Le calque reste maintenant affiché quand le curseur de la souris le survole. Reste à le masquer lorsque l'utilisateur en sort :

  1. Assurez-vous que l'image associée au menu est toujours sélectionnée.

  2. Cliquez sur le bouton "+" de l'inspecteur de comportements et choisissez l'action Afficher-Masquer le calque.

  3. Choisissez le calque Menu Produits et cliquez sur le bouton Masquer.

  4. De retour dans l'inspecteur de comportements, associez l'action à l'événement onMouseOut.

N'oubliez pas de répéter l'ensemble des opérations de masquage et d'affichage des masques pour chacun des boutons et des menus.

Attention
 Pas un pixel d'écart

Remarquez que le menu déroulant est placé très exactement sous le bouton. Pour que notre menu fonctionne correctement, il ne doit en effet y avoir aucun écart entre les différents menus déroulants et la barre de boutons afin que le menu ne se referme pas quand la souris quitte le bouton.



 Masquage des sous-menus 1 2 3 4 5 Finitions