Tutorial écrit par : Daniel Fabien - Script Masters

Ouvrir et fermer un sous-menu

Cette étape est la plus importante dans le rendu dynamique.

Pour y parvenir, nous allons dans un premier temps identifier l’objet que nous appellerons « menu ». En effet, celui-ci est reconnu différemment selon qu’on utilise Netscape ou Internet Explorer.

Qu’est-ce qu’un objet ?

Le but de ce tutorial n’est pas de définir la notion d’objet en Javascript. Pour comprendre ce qui va suivre, il suffit de savoir que l’objet est défini par un identifiant à l’intérieur d’une balise html.
Dans notre cas, il s’agit de la balise <tr> (cf. « Fig. 2.1 : Masquer une ligne d’un tableau ») dont on accède aux propriétés à partir son l’identifiant (« menuN » avec 1=N=Nombre total de menu). La propriété qui nous intéresse dans ce cas est l’affichage ou non du contenu de la balise <tr>.

Ainsi, il est aisé d’appeler une fonction en lui passant simplement le numéro du menu qu’on souhaite ouvrir ou fermé. Celle-ci étant chargée d’afficher ou non le contenu de la balise <tr>.

Le code HTML

Voici un exemple pour bien comprendre le principe :

Dans un premier temps, il est inutile de se soucier du fonctionnement de la fonction Javascript chargée d’ouvrir ou fermer le menu.
Le code HTML ci-dessus est assez simple. Les 3 premières lignes du code permettent d’afficher une ligne de tableau. Vous remarquez à l’intérieur de la balise <td> l’apparition du gestionnaire d’événement « onClick » qui appel la fonction « clicMenu ». Nous passons à cette fonction le numéro du menu que nous souhaitons faire apparaître. Il s’agit ici du numéro 1.
Les lignes qui suivent sont deux menus que nous avons caché (rappel : à l’aide du style « display:none »). Nous leur donnons les identifiants « menu1 » et « menu2 ». Comme nous avons passé à la fonction l’identifiant « 1 », seul le menu 1 (« menu1 ») sera ouvert en cliquant sur la ligne du tableau.
Pour tester ce fonctionnement chez vous, il suffit de copier tel quel le code html ci-dessus et d’insérer la fonction qui suit entre des balises Javascript (« <script language="Javascipt"></script> »)


La fonction Javascript

En fonction de l’état du menu (ouvert ou fermé) nous ouvrirons ou fermerons celui-ci. L’état se mesure avec la valeur que prend menu.style.display. Si cette valeur est égale à none alors le menu est caché. Si elle est nulle alors, le menu est ouvert.
Pour en modifier l’état, il suffit de donner à cette valeur none ou nulle. Voici une fonction qui s’en chargera.

Ce qui permet d’obtenir :

Vous remarquez que l’objet « menuN » est détecté différemment selon que le navigateur soit Internet Explorer ou Netscape. D’où l’utilité des booléens que nous avons vus en seconde partie.

Ci-dessous le résultat lorsqu’on applique cette fonction au menu élaboré en première partie.

Fermer tous les sous-menus

Comme vous pouvez le remarquer, le menu obtenu peut s’ouvrir dans son intégralité. Afin d’améliorer l’effet, il est possible de fermer les éléments ouverts avant d’en ouvrir d’autre.

Pour ce faire, il est nécessaire d’indiquer au script le nombre total de sous-menu dans une variable globale qui sera placé en tout début du Javascript et en dehors de chaque fonction.

Le script suivant est une boucle qui vérifie l’état de chacun des menus. Si l’un d’entre eux est ouvert, il le ferme. Ce script optionnel est à placer avant l’ouverture ou la fermeture des menus dans la fonction précédente.

Ainsi, nous obtenons le résultat suivant :

Titre 1

- Sous-Titre 1.1 - Sous-Titre 1.2

Titre 2

- Sous-Titre 2.1 - Sous-Titre 2.2

Ouvrir un lien

Maintenant que le rendu dynamique du menu est au point, nous allons aborder un aspect plus pratique : l’ouverture des liens du menu. Trois formes de liens sont à prévoir. Dans un premier cas on peut souhaiter d’ouvrir un lien dans la fenêtre courante, dans un second d’ouvrir une nouvelle fenêtre et enfin de charger une page dans un cadre (frame).
La fonction qui suit gère ces trois cas qui sont identifié respectivement par les chaînes de caractère « 1 », « 2 » et « 3 ». En outre l’occasion nous est donné d’utiliser l’instruction conditionnelles « switch ».

La fonction accepte deux paramètres obligatoires (l’url que nous souhaitons ouvrir et le type d’ouverture (1, 2 ou 3) ainsi qu’un paramètre optionnel qui est le nom de la frame cible. Pour appeler cette fonction, nous allons utiliser l’évènement onClick sur une cellule du tableau de sous-menu (voir la première partie de ce tutorial).

Dans ce premier exemple, on ouvre la page dans une nouvelle fenêtre :1

Ici, nous considérons que le menu est situé dans une frame et que nous souhaitons chargé la page dans une autre frame nommée « centre » :

Effet de rollover

Parmi les finitions que nous pouvons appliquer au menu, figure l’effet de rollover (changement de couleur du fond de la cellule et de la police).

Pour ce faire, nous ajoutons une fonction de changement de couleur au script :

Son utilisation est très simple, il suffit de rajouter ces gestionnaire d’événements sur la cellule (rappel : les balises <td>) dont vous souhaitez apporter un effet de rollover. Les deux valeurs hexadécimales passées en paramètre correspondent respectivement à la couleur de fond et à la couleur de la police.
Ces changements s’effectuent lors du passage de la souris sur la cellule (onMouseOver) ou du retrait de la souris de la cellule (onMouseOut). Dans ce dernier cas, on y indique généralement les couleurs par défaut de la cellule. Pour un exemple plus détaillé de cette fonction, suivez cette adresse :
http://www.script-masters.com/home/astuce_javascript-5-148.html

Changer une image

Enfin, vous remarquez sur l’exemple initial la présence d’une flèche au niveau de chaque titre de sous-menu. En cliquant sur un titre, nous modifions également l’image qui est associée afin, par exemple, de changer le sens de la flèche.

fleche.gif : image d’une flèche pointant vers le haut.
fleche2.gif : d’une flèche pointant vers le bas.

Pour modifier une image, il suffit dans un premier temps de lui attribuer un nom qui sera l’identifiant de l’objet image. Ainsi, on pourra y accéder à l’aide de Javascript. Nous plaçons ce code avant le texte des titres de menus :

Vous remarquez que le nom attribué ici est « image1 ». Ceci n’est pas un hasard. Nous avons décidé plus haut d’appeler chaque menu ainsi : « menuN » avec 1<= N<=Nombre total de menu. Comme, le nombre d’image et de menu est égal et qu’ils sont liés (pour chaque menu on affiche une image) on appelle donc les images de la même façon (« imageN » avec 1<=N<=Nombre total de menu).

Ensuite, il suffit de rajouter cette ligne au Javascript à chaque fois qu’on ouvre un menu (rappel : quand menu.style.display = "")

Et celle-ci à chaque fois que menu.style.display = "none"

Vous pouvez trouver un exemple d’accès aux images en Javascript à cette adresse :
http://www.script-masters.com/home/astuce_javascript-9-149.html

Pour ceux d’entre-vous qui n’êtes pas parvenue à réaliser le menu, je vous conseil de télécharger l’archive qui comprend tout le tutorial (les 3 parties) en un seul fichier html ainsi que les sources complète du menu.