Menu Javascript chargé après CSS
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:
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> ';}
}
}
//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> ';
}
//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:
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:
1
2
|
<body onload="initMenu('menu','mh')"> |
Auriez vous une astuce pour supprimer ce clignotement désagréable?
Merci de votre aide
