Valeur de cette activité : 5 points
Compétence :
21- Le menu dynamique javascript

A-Module 04 : JAVASCRIPT : 5 points - difficulté : 2

Le menu dynamique

Présentation

Dans cette activité, vous apprendrez à créer un menu dynamique.
Il faudra d'abord apprendre comment cacher et afficher un objet dans la page.
Suivez-moi, c'est simple!

Exemple d'un menu dynamique
Cliquez sur Menu de Pierre pour afficher le menu.
Cliquez sur - pour masquer le menu.
- Menu de Pierre

Description

  1. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 11995
  2. Inscrivez dans le champ titre : Le menu dynamique
  3. Sélectionnez la matière : informatique
  4. Inscrivez dans le champ No de la directive : 11995
  5. Inscrivez dans votre page le titre de niveau 1 : Le menu dynamique
  6. Le thème de travail sera LES ARBRES DU QUÉBEC
    Trouvez 3 adresses de sites web sur le sujet ; Les arbres du Québec
    Copiez les adresses de ces sites et collez-les dans le bas de votre page.
    Vous utiliserez ces adresses dans quelques instants.
  7. Créez un division (Balise DIV ) identifiée "arbre" dont le paramètre de style DISPLAY est "none" dans votre page en y insérant trois liens vers les sites que vous avez identifiés séparés par un saut de ligne: <div id=arbre style="display:none;"> <a href=http://...>Le bouleau blanc</a><br> <a href=http://...>Le sapin</a><br> <a href=http://...>Le chêne-bleu</a> </div>
  8. Au dessus de cette division, insérez le code suivant afin de produire le lien qui affichera le menu LES ARBRES DU QUÉBEC (l'utilisation de javascript:void(0) permet de rendre inactif ce lien au niveau de sa propriété href) <a href=javascript:void(0) onclick=document.getElementById('arbre').style.display="block";>LES ARBRES DU QUÉBEC</a> Explications :
    Nous utilisons getElementById('arbre') afin d'identifié l'objet de la page dont le paramètre DISPLAY sera modifié.
    Nous utilisons l'évènement onclick afin d'identifié l'action qui déclenchera cette modification.
    Nous utilisons la valeur du paramètre "block" afin d'afficher l'objet.

  9. Au dessus de ce lien, insérez le code suivant afin de produire le lien qui cachera le menu LES ARBRES DU QUÉBEC <a href=javascript:void(0) onclick=document.getElementById('arbre').style.display="none";>-</a> Explications :
    Nous utilisons getElementById('arbre') afin d'identifié l'objet de la page dont le paramètre DISPLAY sera modifié.
    Nous utilisons l'évènement onclick afin d'identifié l'action qui déclenchera cette modification.
    Nous utilisons la valeur du paramètre "none" afin de cacher l'objet.

  10. Enregistrez votre page et essayez votre menu.
  11. Éditez de nouveau votre page (ce n'est pas encore terminé!).
  12. En utilisant le modèle que vous avez créé, ajoutez sous ce menu un saut de ligne et un deuxième menu contenant 3 liens vers des sites reliés au thème : LES RÉGIONS DU QUÉBEC
    Notez que vous devez modifier dans vos deux liens ainsi que dans votre balise DIV l'identifiant ID (arbre) de ce menu en le nommant region (sans accent):

  13. Ajoute ensuite un troisième menu (contenant également trois liens) sur le thème de ton choix selon le modèle des deux menus précédents.
  14. Ajouter ensuite une feuille de style afin de rendre votre menu plus attrayant!
    La feuille de style doit s'appliquer aux éléments du menu.
    PISTE : Sélectionne le menu Affichage/Source de la page de directive et observe bien comment j'ai utilisé les feuilles de styles dans mon exemple.
  15. Visualisez votre page et apportez des modifications au besoin.