Webdesigneuse Webdesign et conception de sites

Construire le menu

Ce menu DHTML associe les propriétés de styles CSS « visibility » et « display » à du Javascript qui les manipule.

Tous les éléments HTML à manipuler sont identifiés, pour le Javascript, par l'attribut id="nomId", c'est leur nom propre en quelque sorte.
Il ne peut y en avoir deux qui ont le même id dans le même document.
Ces « id » sont aussi utilisés dans la feuille de style : afin d'appliquer des propriétés spécifiques à chaque élément.
Leur nommination se fait ainsi : #nomId {propriété:valeur;... }.

Structure H.T.M.L

Mais, pour commencer par le commencement, plaçons d'abord les éléments HTML en leur donnant leur identifiants.

<ul id="menu"><!-- élément conteneur du menu -->
  <li><a href="#">Menu #1</a>
    <ul id="menu1"><!-- élément conteneur du menu #1 -->
      <li><a href="#">menu 1.1</a> </li>
      <li><a href="#">menu 1.2</a> </li>
      <li><a href="#">menu 1.3 &gt;</a>
        <ul id="ssmenu13"><!-- élément conteneur du sous-menu 1.3 -->
          <li><a href="#">sous-menu 1.3.1</a></li>
          <li><a href="#">sous-menu 1.3.2</a></li>
          <li><a href="#">sous-menu 1.3.3</a></li>
          </ul>
        </li>
    </ul>
  </li>
  <li><a href="#">Menu #2</a>
    <ul id="menu2">
      <li><a href="#">menu 2.1 &gt;</a>
        <ul id="ssmenu21"><!-- conteneur du sous-menu 2.1 -->
          <li><a href="#">sous-menu 2.1.1</a></li>
          <li><a href="#">sous-menu 2.1.2</a></li>
          <li><a href="#">sous-menu 2.1.3</a></li>
        </ul>
      </li>
      <li><a href="#">menu 2.2</a></li>
      <li><a href="#">menu 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu #3</a>
    <ul id="menu3"><!-- conteneur du "menu #3" -->
      <li><a href="#">menu 3.1</a></li>
      <li><a href="#">menu 3.2</a></li>
      <li><a href="#">menu 3.3</a></li>
    </ul>
  </li>
</ul><!-- fin du conteneur menu -->

Aperçu des éléments HTML

Mise en forme de la structure : C.S.S

Passons maintenant au contenu des feuilles de styles :

/* style appliqué au conteneur du menu */
#menu {
/* positionnement */
	  position : relative ;
	  width : 23em ;
/* mise en forme */
	  list-style-type : none ; /* pas de puce automatique, on mettra une image */
	  border : 1px solid #900 ; /* écriture raccourcie de la bordure : remplace border-width, border-style et border-color */
	  background : #ddd ; /* écriture abrégée de la couleur : #ddd = #dddddd */ 
	  padding : .3em ; /* écriture raccourcie de la marge intérieure : valable pour les 4 côtés */
	  font-weight : bold ;
}
#menu li {
/* les item du menu sont mis en ligne */
    display : inline ;
	  margin : 0em 1em ;
}
/* propriétés communes aux 3 menus : */
#menu1, #menu2, #menu3 {
/* masquage des menus */
	  visibility : hidden ;
/* positionnement */
	  position : absolute ;
	  top : 1.85em ;
 	width : auto ;
/* mise en forme */
	  padding : .5em ;
	  margin : 0 ;
	  border : 1px solid #DBD4C2 ;
	  background : #EBE5D9 ;
	  font-weight : normal ;
	  text-align : left ;
}
#menu1 li, #menu2 li, #menu3 li {
/* les items des sous-menus sont remis chacun à la ligne */
      display : block ;
}
#menu1 a, #menu2 a, #menu3 a {
/* les liens des menus et sous-menus sont associés à une "puce" */
	  color : #66C ;
/* L'image est placée en arrière-plan */
	  background : url(img/fleche.gif) no-repeat left top ;
/* marge intérieure pour ne pas supperposer le texte et l'image */
	  padding-left : 15px ;
}
/* positions horizontales de chaque menu */
#menu1 {left : 2em ;}
#menu2 {left : 8em ;}
#menu3 {left : 15em ;}
#ssmenu13,  #ssmenu21 {
/* masquage des sous-menus */
	  display : none ;
	  padding-left : .7em ;
}

Aperçu du document avec la feuille de styles

Animer la structure mise en forme : Javascript

Il reste maintenant à « animer » tout ça, ou comme qui dirait, à le « dynamiser ». C'est le rôle du Javascript.
Le script suivant modifie les valeurs des propriétés de style des éléments appelés par leur id.

 
 // Ce script liste ce qui est contenu dans les parenthèses
 // de la fonction masque() lorsqu'elle est appelée
 // puis lit la liste par couple d'élément
 // l'élément 1 du couple défini l'objet à traiter,
 // l'élément 2 comment le traiter 
 
 function masque() { // déclaration de la fonction, on lui donne un nom
	var args = masque.arguments; 
	// args liste tous les arguments 
	// (ce qui se trouvent entre les parenthèses de la fonction)
	for (i = 0; i < (args.length-1); i += 2) { 
	  // une boucle qui lit deux à deux les élements de la liste args
		var obj = document.getElementById(args[i]);
		// obj : déclaration de l'objet à traiter : récupération de son ID
		// args[i] : l'élément 1 du couple, soit son ID
		// args[i+1] : l'élément 2 du couple, soit la propriété/valeur à appliquer
		switch(args[i+1]){
			// Selon le cas, on applique un style particulier à l'objet
			// cas 0 : on masque
			case 0 : obj.style.visibility = "hidden";
			break;
			// cas 1 : on affiche
			case 1 : obj.style.visibility = "visible";
			break;
			// cas 2 : on masque
			case 2 : obj.style.display = "none";
			break;
			// cas 3 : on affiche
			case 3 : obj.style.display= "block";
			break;
		}
	}
 }
  

L'appel de la fonction se fait dans la balise de lien <a> à qui on attribut les gestionnaires d'événement « onmouseover » (en français, quandlasourispassedessus) et « onfocus » (indépendant de la souris, le focus est le moment où l'élément est sélectionné, au clavier par ex.) qui ont pour valeur la fonction masque() argumentée des éléments (les id) à manipuler.

 <a href="#" onmouseover="masque('menu1',1,'menu2',0,'menu3',0)" onfocus="masque('menu1',1,'menu2',0,'menu3',0)">Menu 
  #1</a>

  -> au survol de ce lien ou lorsque celui-ci a le focus, #menu1 est affiché, 
  #menu2 et #menu3, masqués

  -> notez l'imbrication des cotes (" '' ") et la disparition du 
  # pour l'appel aux id

Aperçu du menu « dynamisé »

Précision : on applique dans la fonction masque() des styles « visibility » ou « display ». Cela dépend en fait de l'effet que l'on veut donner aux éléments manipulables.
La propriété visibility n'interfèrera pas sur le reste du document : les menus 1, 2 et 3 s'affichent au dessus du texte du document.
La propriété display, modifie le positionnement des élements qui suivent : les sous menus agrandissent leur conteneur.