Discussion :

[Mitaka]

bonjour à tous,

j'ai un menu déroulant vertical qui s'affiche au moment du chargement de la page. Pb : il est complètement déroulé pendant le chargement.
j'aimerai mettre une image ou un texte "veuillez patientez", le temps que le menu soit complètement chargé pour ne pas déstabiliser l'utilisateur...

voici le code javascript de mon menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

le html et php:

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
 
<div class="clTitle">
Nos références
</div>
 
<div id='menu_gauche'> <!-- These are the contents of the foldoutmenu. -->
<?php
   echo "<ul  class='titre_menu' onclick='javascript:montre();'><li><a href='./index.php?type=0'>Présentation</a></li></ul>";
include ($_SERVER['DOCUMENT_ROOT']."/include/connexion.php");
$requete_menu = mysql_query("select nom,id_type from type_reference where id_ss_type=0 order by id_type");
$i = 2;
$j = 1;
     while ($ligne_menu=mysql_fetch_object($requete_menu))
     {
 
        echo  "<ul class='titre_menu' onclick=\" montre('smenu$i');  \">
                  <li  onclick=\"sel_icone(this);\"><a href='#' onLoad=\"sel_menu(this);\" onclick=\"sel_menu(this);\"> $ligne_menu->nom</a></li>
               </ul>\n";
 
           echo "    <ul id='smenu$i' class='titre_ss_menu'>";
 
        $requete_ss_menu = mysql_query("select nom,id_ss_type from type_reference where id_ss_type>0 and id_type='$ligne_menu->id_type' order by id_ss_type");
 
 
        while ($ligne_ss_menu = mysql_fetch_object($requete_ss_menu))
        {
 
           $class ="";
           //permet de sélectionné le menu actif
           if (isset($_GET['smenu_actif']))
           {
             if (($_GET['smenu_actif'])=="smenu_actif".$j)
                $class = "class='ss_menu_select'";
             else
                $class =  "class='ss_menu_unselect'";
           }
           echo "        <li><a $class href='./index.php?type=$ligne_menu->id_type&ss_type=$ligne_ss_menu->id_ss_type&smenu=smenu$i&smenu_actif=smenu_actif$j'>$ligne_ss_menu->nom</a></li>\n";
           $j++;
 
        }
        echo "</ul>\n ";
      $i ++ ;
     }
?>
<script language="JavaScript">window.onload=function(){montre('<?=$_GET['smenu']?>');     }</script>
</div> <!-- Here ends the foldoutmenu. -->

Le menu s'affiche selon une base de données

le css :

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
123
124
125
 
/*Menu de référence
/**********************************************************************************************************************/
 
.clTitle {
 background-color:#d5d0ba;
 font-family: Times New Roman;
 font-size:21px;
 display:block ;
 color:#765;
 padding:5px;
 width:155px;
 border-right:1px dotted black;
 font-style: italic;
 font-weight:bold;
 padding-left:5px;
 position:expression("absolute");
 left:expression("249px");
 
 
}
 
/*********************** cadre global du menu de gauche **************************/
 
#menu_gauche {
  float:left;
  width:165px;
  border-bottom:1px dotted black;
  border-right:1px dotted black;
  /****bug ie********/
  padding-bottom:expression("10px");
  padding-top:expression("10px");
  left: expression("249px");
  margin-top :expression("30px");
 
  /****fin bug ie********/
 
 
 
}
 
/********* cadre des titres du menu de gauche *********/
 
#menu_gauche .titre_menu {
  margin-left:20px;
}
 
/**** style des puces des titres du menu de gauche****/
 
#menu_gauche .titre_menu li,#menu_gauche .titre_menu li.icone_unselect {
  list-style-image:url("../images/kre_marron.gif");
  display:inline;
  cursor:pointer;
  line-height:13px;
  line-height:expression("7px");
 
}
 
#menu_gauche .titre_menu a:hover, #menu_gauche .titre_menu li.icone_select {
  list-style-image:url("../images/kre_blanc_marron.gif");
 
}
 
 
 
/**** style des titres du menu de gauche****/
 
#menu_gauche .titre_menu a,#menu_gauche .titre_menu a.menu_unselect{
  display:list-item;
  color:#765;
  font-family:verdana,arial,helvetica,sans-serif;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
  padding:1px;
 
}
 
#menu_gauche .titre_menu a.menu_select {
  background-color:#d5d0ba;
  color:#765;
  text-decoration:none;
}
 
/********* cadre des titres du ss_menu de gauche *********/
 
#menu_gauche .titre_ss_menu {
  width:145px;
  padding-left:20px;
}
 
/**** style des puces des ss_titres du menu de gauche****/
 
#menu_gauche .titre_ss_menu li {
  list-style:none;
  display:block;
 
  /****bug ie********/
    margin: expression("0");
  /****fin bug ie********/
 
}
 
 
/**** style des ss_titres du menu de gauche****/
 
#menu_gauche .titre_ss_menu a,#menu_gauche .titre_ss_menu a.ss_menu_unselect{
  color: #7f9d63;
  font-size:10px;
  font-weight:bold;
  text-decoration:none;
  border:1px solid white ;
  border-right:7px solid white;
  text-align:left;
  display:block;
 
}
 
#menu_gauche .titre_ss_menu a:hover,#menu_gauche .titre_ss_menu a.ss_menu_select {
  background-color:white;
  color:#4a423b;
  border: 1px solid #d5d0ba;
  border-right:7px solid #d5d0ba;
 
}

désolé le code n'est pas très propre ...

est ce quelqu'un a une idée ?

merci d'avance

[Cpas2latarte]

pour être franc, je trouve que la description de ton problème est pluto vague....


Qu'appels tu un menu déroulant exatement ?
une liste de selection ?
un system de menu géré en Script?
n'est il pas possible de rendre ce monu invisble durant le chargement, pui s de le rendre visible une fois chargé
kk chose du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="DivContenantLeMenu" style="visibility: hidden">
ici le menu
</div>
 
<script>
window.onload = function () {
document.getElementById("DivContenantLeMenu").style.visibility = "visible;"
}
</script>

[Mitaka]

merci pour ta réponse et désolée d'avoir été assez floue .

euh deux petites questions :
- si l'utilisateur a activé le javascript, il ne pourra pas voir le menu comment remédier au problème alors?
- ce n'est vraiment pas possible de mettre un message "veuillez patientez" si le javascript est activé ?

[denisC]

euh deux petites questions :
- si l'utilisateur a activé le javascript, il ne pourra pas voir le menu comment remédier au problème alors?

Euh, en mettant une balise noscript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<noscript>Vous devez activer le javascript</noscript>

Sinon, dans le cas du javascript, tu peux faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id='menu' style='visibility:hidden'>
Ici le menu
</div>
<div id='messageAttente' style='position:absolute;top:200px;left:300px'>
Veuillez patienter pendant le chargement de la page
</div>

Puis sur le onload de ton document (ou de la fenetre):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function afficheMenu() {
  document.getElementById('menu').style.visibility="visible";
  document.getElementById('messageAttente').style.display="none";
}

Voila pour le principe. A toi d'ajuster