tfe Homepage

Voila, vu que je viens de faire le système sur le site internet, j'ai décidé de créer un mini tutorial pour créer le même style de menu sur votre site web.

Tout d'abord, la structure du menu:

<ul> <li><p id="nav">Navigation</p> <ul id="subnav"> <li>element 1</li> <li>element 2</li> </ul> </li> <!-- etc etc --> </ul>

Comme on le voit ici, il y a pour chaque section des id, et des subids, afin de cacher certaines parties.

Maintenant créons notre Java script associé: pour lancer la fonction menu au démarrage de la page.

window.onload = menu;

On définit un tableau d'éléments du menu (On aurait pu également les rechercher 1 par 1)

var elts = new Array("nav","styles","images","liens","perso");

On créer un tableau de valeurs, pour connaître l'état actuel des sous-menus: (valeurs par defaut derriere les || )

var menuitem = new Array(); menuitem["nav"] = getCookie("nav") || 0 ; menuitem["styles"] = getCookie("styles") ||1; menuitem["images"] = getCookie("images") || 0 ; menuitem["liens"]= getCookie("liens") || 1; menuitem["perso"] = getCookie("perso") || 1;

On peut alors créer notre fonction menu:

function menu() { for(i=0;i<elts.length;i++) { var elt= document.getElementById(elts[i]); event(elt, "click", ouverture); if (menuitem[elt.id] == 0) { ouvre(document.getElementById("sub"+elt.id)); } else { ferme(document.getElementById("sub"+elt.id)); } }

Comme on peut le voir, on fait appel à la fonction ouvre() et ferme() en fonction des valeurs des sous-éléments. Si un élément de menuitem vaut 0, on appel alors la fonction ouvre() avec pour paramètre "sub"+nom_de_l_element.

Les fonctions ouvre et ferme sont alors définies comme suit:

function ouvre(elt,size) { if (!size) { size=0; } if (elt.id == "subimages") { elt.style.height = "auto"; elt.style.visibility = "visible"; } else { if ((elt.childNodes.length ) * 7 < size) { elt.style.visibility = "visible"; } else { elt.style.visibility = "hidden"; elt.style.height = (size+10)+"px"; setTimeout(ouvre, 1,elt,size+10); } } } function ferme(elt,size) { if (!size) { size=elt.childNodes.length * 7; } if (elt.id == "subimages") { elt.style.height = "auto"; elt.style.visibility = "visible"; } else { if ( size > 1) { elt.style.visibility = "hidden"; if (size>7) { size-=7; elt.style.height = size+"px"; setTimeout(ferme,1,elt,size); } else { elt.style.height = 0+"px"; } } } }

Petites explications: les fonctions ouvre et ferme prennent 2 attributs en paramètre: l'élément a modifier et sa taille actuelle.

Tant que la taille actuelle n'est pas la taille finale souhaitée, on crée un timer. (voir aussi le tuto timer