mettre image ou texte pendant chargement d'un menu
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:
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:
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:
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
