Bonjour, j'ai un menu rétractable à gauche de ma page qui utilise la fonction
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| function mng(){
var Table_Gauche=document.getElementById('dg1')
//wrg largeur du menu
var wrg = ((navigator.appName.substring(0,5)=="Micro") ? parseInt(Table_Gauche.currentStyle.width) : parseInt(getComputedStyle(Table_Gauche, null).getPropertyValue('width')));
if(mngv==1){
//largeur lorsque le menu gauche est fermé
document.getElementById("IdTabBouton").style.width=99+'%';//div3
document.getElementById("IdDivIm").style.width=99+'%'//div2
document.getElementById("IdTabBouton").style.left="30px";
document.getElementById("IdDivIm").style.left="30px";
/* cache la scrollbar lorsque le menu est fermé
document.getElementById("dg1").style.setAttribute("cssText","overflow:hidden;");//IE
document.getElementById("dg1").setAttribute("style","overflow:hidden;");//ff*/
Table_Gauche.style.width =29+'px' //29px correspond à la barre de menu vertical lorsque le menu est fermé
if(wrg<=39){ //wrg<=39 on augmente la taille du menu en mettant mngv=0 et on relance la fonction mng au bout de 16ms avec mngv=0
mngv=0
document.getElementById('gm2').src='retour.gif'
/* cache la scrollbar lorsque le menu est ouvert
document.getElementById("dg1").style.setAttribute("cssText","overflow:scroll;");//IE
document.getElementById("dg1").setAttribute("style","overflow:scroll;");//ff*/
return false// sortie de la fonction
}
setTimeout("mng()",16) //on relance la fonction mng au bout de 16ms avec mngv=0
}
// mngv==0 quand le menu entier n'est pas ouvert ou déroulé
if(mngv==0){
//largeur lorsque le menu gauche est ouvert
document.getElementById("IdTabBouton").style.width=84+'%';//div3
document.getElementById("IdDivIm").style.width=84+'%';//div1
document.getElementById("IdTabBouton").style.left="210px";
document.getElementById("IdDivIm").style.left="210px";
//Table_Gauche.style.width= wrg+10+'px' // augmentation de la taille du menu jusqu'au moment où Table_Gauche.style.width==200
Table_Gauche.style.width= 209+'px'//209px correspond à la place prise par le menu vertical lorsqu'l est ouvert
if(wrg>=200){//wrg>=200 on diminue la taille du menu en mettant mngv=1
mngv=1
document.getElementById('gm2').src='aller.gif'
return false
}
setTimeout("mng()",16)
}
} |
ça se passe plutôt bien avec ff et ie mais pour safari et google chrome mon menu ne se ferme pas et je soupçonne cette ligne
var wrg = ((navigator.appName.substring(0,5)=="Micro") ? parseInt(Table_Gauche.currentStyle.width) : parseInt(getComputedStyle(Table_Gauche, null).getPropertyValue('width')));
l'appel de cette fonction est faite dans le body grâce à
<div id='fleche1' onClick='mng();'><img id='gm2' src='aller.gif' style='margin-left:2px'></div>
aller.gif et retour.gif sont uniquement des flèches directionnelles qui représentent la prochaine action à faire sur le menu. Exemple si le menu est fermé aller.gif montrera à l'utilisateur une flèche pour dérouler le menu et dans l'autre cas retour.gif fera le contraire.
Merci
Partager