Discussion :

[annekeuss]

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

[le_chomeur]

aurais tu un exemple en ligne ou un exemple complet ?

[DoubleU]

Le plus simple ca serait de temporiser l'appel a initMenu du onload de quelques millisecondes, le temps que ton css se charge enti�rement.

[annekeuss]

Le plus simple ca serait de temporiser l'appel a initMenu du onload de quelques millisecondes, le temps que ton css se charge enti�rement.

Commen puis je faire cela? d�sol�e mais je d�bute...

[DoubleU]

Un truc un peu dans ce genre (par contre, je sais pas pourquoi mais pas sur que la syntaxe passe xD):

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<body onload="setTimeout(\"initMenu('menu','mh')\",200)">

[le_chomeur]

sinon essaye :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<script type="text/javascript">initMenu('menu','mh')</script>

tout en bas de ta page, tes �l�ments seronts charg� ainsi que ton css.

juste une pr�cision , ce type de menu peux �tre r�alis� en full css sans faire appel a du javascript

[annekeuss]

Malheureusement je n'ai pas d'exemple en ligne car c'est un Intranet

voici le code d'une page compl�te

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
 
 
session_start();
//echo 'SESSION'.$_SESSION['typeAccess'];
include "../set_const.php";
include_once "./authentification/checkAuthentification.process.php";
ProcessAuthentificationCheck();
 
?>
<html>
  <head>
    <title> Portail
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link href="styles/menu.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="styles/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="javascript/menu.js"></script>
  </head>
  <body onload="initMenu('menu','mh')">
    <!-- Bandeau haut -->
    <table class="menu" align="top" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#80122F">
      <tr>
        <td>
          <img src="../images/AM.jpg" width="150" height="137" alt=""></td>
        <td>
          <a href="./authentification/authentification.form.php" class="lien1">
            <div class="ver11"> Déconnexion
            </div></a></td>
      </tr>
    </table>
<?php ob_start(); 
?>
<table class="menu">
  <tr>
    <td class="menu">
      <a class="lien1" href="<?php echo $accueil ?>">
        <img src="../menu/home.jpg"/></a></td>
    <td class="fond">
      <div id="vvmenu">
        <ul id="menu">
          <li> Titre 1
          <ul>
            <li>
            <a>
              Titre 1.1</a>
            <ul>
              <li>
              <a href="present.php">Titre 1.1.1</a></li>
              <li>
              <a href="forma.php">Titre 1.1.2</a></li>
              <li>
              <a href="parcours.php">Titre 1.1.3</a></li>
              <li>
              <a href="proc.php">Titre 1.1.4</a></li>
            </ul></li>
            <li>
            <a href="sur.php">Titre 1.2</a></li>
            <li>
            <a href="atte.php">Titre 1.3</a></li>
            <li>
            <a href="blm.php">Titre 1.4</a></li>
            <li>
            <a href="adsl.php">Titre 1.5</a></li>
          </ul></li>
          <li> Titre 2
          <ul>
            <li>
            <a href="mob.php">Titre 2.1</a></li>
            <li>
            <a href="infos_ref.php">Titre 2.2</a></li>
          </ul></li>
          <li> Titre 3
          <ul>
            <li>
            <a href="commiss.php">Titre 3.1</a></li>
            <li>
            <a href="CS.php">Titre 3.2</a></li>
            <li>
            <a href="port.php">Titre 3.3</a></li>
            <li>
            <a href="CDKG.php">Titre3.4</a></li>
            <li>
            <a href="proc_ech.php">Titre 3.5</a></li>
          </ul></li>
        </ul>
      </div></td>
  </tr>
</table>
<?php ob_flush(); 
?>
<TABLE width="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<?php
        include "presentation.php";                                     
      ?>
    </table> 
  </body>
</html>

Merci de ton aide