Bonjour,

j'ai créé un menu en javascript / CSS
J'ai un problème lorsque je charge une page sous IE, le javascript se charge avant le CSS ce qui donne un clignotement sur la page.

ci dessous mon code javascipt
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
  var delai,menu,dul,db,class_menu;pause=1500;D=document;wul1=0;
  ie=D.all?1:0;op=window.opera?1:0;dtd=D.compatMode=="CSS1Compat"?1:0;
 
// paramétrage :
// flèches pour niveau horizontal, vertical ou vertical à droite
flh=''; flg='›'; fld='‹';
flc=ie?4:8 ;// espace pour la flèche
//correction bug padding+border ie et opéra non dtd 
da=10 // des liens
dul=(ie&!dtd)?4:0; // des ul
danc=(ie&!dtd)?10:0;// hauteur du div "ancre_menu"
 
function initMenu(id_menu,class_menu){
  de=ie&!op&&dtd?D.documentElement:D.body //exception IE6 dtd
  fx=ie&!op?de.clientWidth:innerWidth-20  //l fenêtre
  menu=D.getElementById(id_menu);
  wul=[] // tableau des largeurs de sous-menus
  as=menu.getElementsByTagName('a');
  sousMenu=menu.getElementsByTagName('ul');
  elem=document.getElementsByTagName('select');
 
  // ajoute a href="#" dans les li sans lien .
  lis=menu.getElementsByTagName('li');
  for(i=0;i<lis.length;i++){var L=lis[i];
    if(L.firstChild.tagName!="A"){
      titre=L.firstChild.data;L.removeChild(L.firstChild);
      L.innerHTML='<a href="#">'+titre+'<\/a>'+L.innerHTML;L.className="titre"
    }
    else L.className="lien" // avec url 
  }
  //ajoute un id aux sous-menus
 	for(j=0;j<sousMenu.length;j++){sousMenu[j].id="ul"+j;wul[j]=0
  }
  //construction du menu :
	for(i=0;i<as.length;i++){
    lien=as[i];wa=lien.offsetWidth;
    smenu=lien.parentNode.getElementsByTagName('ul')[0]?1:0;
   	if (smenu)wa+=flc;
    // 1er niveau horizontal 
    if(lien.parentNode.parentNode.id==id_menu){
      if(class_menu=="mh"){if(smenu&&lien.innerHTML!="")lien.innerHTML+=flh;
        wa=lien.offsetWidth;wul1+=wa+da;     
        }            
      else { // vertical
        if(wa>wul1){wul1=wa+da;};
        // ajoute les fléches 
        if(smenu){lien.innerHTML=(class_menu=="vd")?'<span class="fl">'+fld+'</span>'+
          lien.innerHTML:lien.innerHTML+'<span class="fl">'+flg+'</span>&nbsp;';}
      }
    }
    //autres niveaux verticaux
    else {
      n=eval(lien.parentNode.parentNode.id.substr(2,2));
      if(wa>wul[n]){wul[n]=wa;};
      // ajoute les fléches 
      if(smenu)lien.innerHTML=(class_menu=="vd")?'<span class="fl">'+fld+'</span>'+
        lien.innerHTML:lien.innerHTML+'<span class="fl">'+flg+'</span>&nbsp;';
    }
    //ajoute les évènements.
		lien.onmouseover=lien.onfocus=function(){
      ul_parent=this.parentNode.parentNode;
      ul=this.parentNode.getElementsByTagName('ul')[0]
      ef(ul_parent); // cache tout après l'ul parent
      if(ul){ul.style.visibility="visible";// montre l'ul enfant
        (class_menu=="vd")?ul.style.right="100%":
        (class_menu=="mh"&&ul_parent.id!=id_menu)||(class_menu=="vg")?ul.style.left="100%":0;
        this.className="suivi"; // marquage du suivi de lien 
        voirSelect('hidden'); 
        }
      }; lien.onmouseout=function(){delai=setTimeout('eftout()',pause)};
  }
 
  //fixe la largeur du 1er menu :
  if(wul1)menu.style.width=wul1+dul+"px";
 
  //largeur des sous-menu verticaux et de leurs liens :
  for(var x=0;x<wul.length;x++){
    ula=sousMenu[x].getElementsByTagName('a');dda=(ie&!dtd)?da:0;
    for(var i=0;i<ula.length;i++){ula[i].style.width=wul[x]+dda+"px";
    }
  sousMenu[x].style.width=wul[x]+da+dul+"px";
  }
  lien.onblur=D.onclick=eftout // pour navigation clavier IE
  menu.className=class_menu; //activation retardée de la feuille de style
 
  // replace les flèches des menus verticaux au bons endroits.
  span = menu.getElementsByTagName('span');
	for(i=0;i<span.length;i++){A=span[i].parentNode;c=span[i].style;
    if(span[i].className=="fl"){
      c.top=A.offsetTop+2+"px";c.left=(class_menu=="vd")?4+"px":A.offsetWidth-8+"px";
    }
  }
ancremenu();
}
 
function ancremenu(){ancre=D.getElementById('ancre_menu');
  if(ancre){
  ancre.appendChild(menu);
  with(ancre.style){
    height=menu.offsetHeight+danc+'px';width=menu.offsetWidth+dul+'px';
    }
  }
}
 
function ef(ul) { //cache les uls qui suivent cet ul.
  clearTimeout(delai);
  var li=ul.getElementsByTagName('li');
  for(i=0;i<li.length;i++){
    var ul=li[i].getElementsByTagName('ul')[0];
    if(ul){ul.style.visibility="hidden";
      li[i].firstChild.className=""; //rétabli le marquage initial
}}}
 
function eftout(){ef(menu);voirSelect('visible');
menu.style.visibility="hidden";menu.style.visibility="visible";// bug ie
}
 
// bug ie corrigé : cache les <select> quand le menu est visible
function voirSelect(v){
if(ie&!op){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}
ci dessous ma feuille de style

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
#ancre_menu{vertical-align:top;padding:5px 5px 0 0;margin:0}
 
/* liens */
.mh a,.vg a,.vd a{
  display:block;
  margin:0;
  padding:2px 5px;
  text-decoration:none;
  line-height:1.1em;
}
 
/* titre premier niveau */
.titre a{
  background-color: none;
  color:#920A0A;
  cursor:default;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight:bold; 
}
 
/* titre selectionné */ 
.titre a:hover,.titre a:focus,.titre a:active{
  background-color:#808080;
  color:#FFFFFF;
} 
.titre .suivi{
  background-color:#808080;
  color:#FFFFFF;
} 
 /* couleur du suivi */
/* avec url */
.lien a{
  background-color:#CCCCCC;
  color:black;
  font-weight:normal;
  cursor:pointer;
  cursor:hand/*IE5.0*/;
}
 
.lien a:hover,.lien a:active,.lien a:focus{
  background-color:white;
  color:black;
  font-weight:bold;
  border:2px inset black;
  padding:0 3px;
}
 
/* flèches */
.fh,.fl{
  font-size:80%;
}
.fl{
  position:absolute;
}
 
/* 1er niveau : */
.mh li,.vd li,.vg li{
  display:inline;
} /* bug IE */
.mh li{
  float:left;
}
.mh{
  height:1.35em;
}
.vg,.vg ul,.mh,.mh ul,.vd,.vd ul{
  position:absolute;
  margin:0;
  padding:0;
  /*border:1px outset #DDF4EC;*/
  border:1px outset black;
  z-index:9;
}
.vd{
  text-align:right;right:1.3em;
}/* marge du body de general.css reportée */
 
/* 2éme niveau et suivants */
.mh li li{
  float:none;
} 
.vg ul,.mh ul,.vd ul{
  visibility:hidden;
}
.mh ul{
  margin-top:.4em;
}
.vg ul,.mh ul ul{
  margin:-1.5em 0 0 -3px;
}
.vd ul{
  margin:-1.5em -3px 0 0;
}
je charge ensuite le menu dans le body de la façon suivante :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
<body onload="initMenu('menu','mh')">
Auriez vous une astuce pour supprimer ce clignotement désagréable?
Merci de votre aide