/** Fonctions javascript d'animation du menu. Le principe : On a autant de div que de pages de menu. Les div sont superposés les uns sur les autres avec un décalage en hauteur pour permetre l'affichage du titre de chaque page (div) de menu. Lorsqu'on veut afficher une page, toutes les pages de menu dont le titre est en dessous sont réduites et toutes les pages de menu dont le titre est au dessus sont agrandies. De cette manière seule la page selectionnée est visible car elle cache les pages de menu dont le titre est au dessus. Le programme se base sur la feuille de style qui décrit les positions des menus (ici gestmenu.css) Il doit donc y avoir exactement autant de classes css dans cette feuille de style que de pages (div) de menu. - La premiere classe doit etre affectée la premirer page de menu. - La seconde classe à la deuxieme page de menu et ainsi de suite... Le données communes au menu peuvent etre regroupées dans une seule classe mais doit être placée dans une autre feuille de style. (ici stylemenu.css) Les données qui doivent apparaitre obligatoirement dans la feuille de style d'animation des menus sont : - height, pour l'initialisation par la fonction initMenu - width, pour l'initialisation par la fonction initMenu - top, pour l'initialisation par la fonction initMenu - left, pour l'initialisation par la fonction initMenu - z-index, qui permet de déterminer l'ordre d'affichage sur l'axe z des pages de menu. Pour ajouter une page de menu. - Dans la pages HTML : - Ajouter un nouveau div avec une nouvelle classe css - Ajouter le nouvel index dans la fonction showMenu (index précédent + 1) Remarque : la numérotation des index doit commencer obligatoirement par 0 - Dans la feuille de style de gestion de l'animation des menus - recopier une classe css d'une page a la suite des autres classes - renomer la classe ave le nom donné dans la nouvelle page de menu - mettre à jour le z-index pour qu'elle s'affiche au dessous de toutes les autres. */ idStyleSheet = 0; // Identifiant de la feuille css qui gere l'animation du menu. hauteurMenu = 0; // Hauteur totele initiale d'une page de menu hauteurTitre = 0; // Hauteur du titre d'une page de menu. Il s'agit de la partie toujours visible du menu largeurMenu = 0; // Largeur d'une page de menu topPosition = 0; // Position par rapport au haut de la page HTML leftPosition = 0; // Position par rapport au bord gauche de la page HTML intervale = 0; // Intervale de déplacement d'un menu. /* la fonction initalise le menu. elle doit appelée dans le onload de la page HTML idStyle : Index de la feuille de style contenu la définition des positions de menus (./styles/gestmenu.css) hautMenu : Hauteur totale en px d'une page de menu hautTitre : Hauteur en px du titre du menu largMenu : Largeur du menu topPos : Position par rapport au haut de la page en px de la première page de menu leftPos : Position par rapport au bord gauche de la page en px des pages de menu inter : Intervale en px d'ouverture et de fermeture d'un menu idMenu : Numéro de menu a afficher à l'initialisation. */ function initMenu(idStyle, hautMenu, hautTitre, largMenu, topPos, leftPos, inter, idMenu) { hauteurMenu = hautMenu + "px"; hauteurTitre = hautTitre + "px"; largeurMenu = largMenu + "px"; topPosition = topPos + "px"; leftPosition = leftPos + "px"; idStyleSheet = idStyle; intervale = inter; var regles = (document.styleSheets[idStyleSheet].cssRules) ? document.styleSheets[idStyleSheet].cssRules : document.styleSheets[idStyleSheet].rules; /* //ferme les menus nécessaires l'affichage du menu designé dans idMenu for(i=idMenu+1; i < regles.length; i++) { regles[i].style.height=hautTitre + "px"; regles[i].style.top=(topPos + parseInt(hautMenu,10) + (parseInt(hautTitre,10) * (i))) + "px"; regles[i].style.width=largMenu + "px"; regles[i].style.left=leftPos + "px"; } //Ouvrir les menus à partir du menu désigné dans idMenu for(i=0; i < idMenu+1; i++) { regles[i].style.height=hautMenu + "px"; regles[i].style.top=(topPos + (parseInt(hautTitre,10) * (i+1))) + "px"; regles[i].style.width=largMenu + "px"; regles[i].style.left=leftPos + "px"; }*/ } // Détermine la prochaine position d'une page du menu lors de sa fermeture. function getTimeTopClose(topPx) { var top=topPx.substring(0, topPx.length-2); top = parseInt(top,10); return top + intervale; } // Détermine la prochaine hauteur d'une page du menu lors de sa fermeture. function getTimeHeightClose(heightPx) { var height=heightPx.substring(0, heightPx.length-2); var numHauteurMenuFerme = parseInt(hauteurTitre.substring(0, hauteurTitre.length-2)); height = parseInt(height,10); return (height-intervale <= numHauteurMenuFerme ) ? numHauteurMenuFerme : height-intervale; } // Détermine la prochaine position d'une page du menu lors de son ouverture. function getTimeTopOpen(topPx) { var top=topPx.substring(0, topPx.length-2); top = parseInt(top,10); return top - intervale; } // Détermine la prochaine hauteur d'une page du menu lors de son ouverture. function getTimeHeightOpen(heightPx) { var height=heightPx.substring(0, heightPx.length-2); var numHauteurMenuOuvert = parseInt(hauteurMenu.substring(0, hauteurMenu.length-2)); height = parseInt(height,10); return (height+intervale >= numHauteurMenuOuvert) ? numHauteurMenuOuvert : height+intervale; } // Anime le menu pour afficher la page données en id. function showMenu(id) { // recupération des regles css des menus. var el=document.getElementById("cadremenu"+id); var regles = (document.styleSheets[idStyleSheet].cssRules) ? document.styleSheets[idStyleSheet].cssRules : document.styleSheets[idStyleSheet].rules; if (id!=0 && id!=3 && id!=4 && id!=8 && id!=9){ // fermeture de tous les menus en dessous du menu choisi for(i=regles.length-1; i>id; i--) { if(regles[i].style.height != hauteurTitre) { regles[i].style.height=getTimeHeightClose(regles[i].style.height) + "px"; regles[i].style.top=getTimeTopClose(regles[i].style.top) + "px"; } } // ouverture du menu choisi et de tous les menus au dessus du menu choisi if (regles[id].style.height != hauteurMenu){ for(i=1; i