[JavaScript] [SRC] menu déroulant horizontal

Auteur · 26/01/2007, 19h24

Citation:

Source : Menu déroulant horizontal
Auteur : Auteur
Code :

Code html :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Menu deroulant</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
/******** Feuille de styles du menu ************/
.menu{
 float: left;
 margin: 2px;
 padding: 2px;
}
 
.titreMenu, .contenuMenu, .lienMenu{
 color: #000000;
}
 
.titreMenu, .contenuMenu{
 border: 2px outset #AAAAAA;
 width: 120px;
 text-align: center;
 margin: 0px;
 padding: 0px;
}
 
.contenuMenu{
 display: none;
 position: absolute;
 background-color: #FFFFFF;
}
 
.menuOverflow{
 overflow: auto;
 height: 200px;
}
 
.itemOver{
 background-color: #AAAAFF
}
 
.itemOut{
 background-color: #FFFFFF;
}
 
.lienMenu{
 text-decoration: none;
}
 
.crlf{
 clear: both;
 /*visibility: hidden;*/
}
 
/******** Fin de la feuille de styles du menu ************/
//-->
</style>
 
 
 
<script type="text/javascript">
<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","1000");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
//-->
</script>
 
</head>
 
<body>
 
<!-- Debut code HTML du menu -->
<!-- Debut Menu 1 -->
<div class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre">Menu 1</div>
 
  <div class="contenuMenu" id="Menu1Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 11</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 12</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 13</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 14</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 15</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 16</a></div>
  </div>
 
</div>
<!-- Fin Menu 1 -->
<!-- Debut Menu 2 -->
<div class="menu" id="Menu2" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre">Menu 2</div>
 
  <div class="contenuMenu" id="Menu2Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 21</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 22</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 23</a></div>
  </div>
 
</div>
<!-- Fin Menu 2 -->
<!-- Debut Menu 3 -->
<div class="menu" id="Menu3" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu3Titre">Menu 3</div>
 
  <div class="contenuMenu menuOverflow" id="Menu3Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 30</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 31</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 32</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 33</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 34</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 35</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 36</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 37</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 38</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 39</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3A</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3B</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3C</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3D</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3E</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 3F</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 40</a></div>
  </div>
 
</div>
<div><br /><br /></div>
<hr class="crlf" />
<!-- Fin code HTML du menu -->
 
<div>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
 
</body>
 
</html>

Remarques :
page valide XHTML 1.1

Testé sous IE et Firefox

id :
Pour un id="menu1" :
>> id du titre "menu1Titre"
>> id de la liste "menu1Item"

classes :

classe du conteneur : "menu"
classes du titre du menu :
- "titreMenu itemOut" sur onmouseout()
- "titreMenu itemOver" sur onmouseover()
classes du conteneur des items : "contenuMenu"
- div : "itemOut" sur onmouseout() et "itemOver" sur onmouseover()
- a : "lienMenu" sur les liens

exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre">Menu 1</div>
 
  <div class="contenuMenu" id="Menu1Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="#" class="lienMenu">Sous menu 11</a></div>
.....
  </div>
 
</div>

balise <hr>
classe crlf. Cette balise permet un retour à la ligne du menu. Sa présence est nécessaire.
Enlever les commentaires autour du style visibility pour faire disparaître la ligne.

Auteur · 08/06/2007, 23h02

Je fournis une variante de ce menu dans cette discussion.

Le menu s'affiche ou se cache sur l'événement onclick d'un bouton (qui est en fait un div) et non plus sur les événements onmouseover et onmouseout.

Dans la discussion, j'explique les modifications (mineures) faites sur le code d'origine.

08/06/2007, 23h02	#2
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 796 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 796 Points : 5 119 Points : 5 119	Je fournis une variante de ce menu dans cette discussion. Le menu s'affiche ou se cache sur l'événement onclick d'un bouton (qui est en fait un div) et non plus sur les événements onmouseover et onmouseout. Dans la discussion, j'explique les modifications (mineures) faites sur le code d'origine.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email