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]

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

[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]

ça marche !! Merci beaucoup !