Menu bouton en javascript

**cryptoo** · 05/06/2007, 08h35

Bonjour encore une question...
voila j'aimerai concevoir un bouton avec la balise input. Mais en cliquant dessus je veux faire apparaitre un div juste en dessous du bouton!
pour faire une sorte de menu bouton comme avec yahoo

J'arrive a afficher le div en cliquant sur le bouton mais le problème c que je n'arrive pas a le positionner sous le bouton!
j'ai essayé d'utiliser les propritées top et left du div mais rien n'y fait, le div ne bouge pas!
voila la partie style du div

style="position:absolute;visibility:hidden;top:276px;left:354px;"

lors du clique sur le bouton, l'attribut visibility est changé en "visible"!
Avez vous une idée??
Merci d'avance.
Cryptoo

**gk14fire** · 05/06/2007, 08h46

Je pense tu t'en sortiras mieux avec une position "relative" plutôt que "absolute"

**Auteur** · 05/06/2007, 13h37

bonjour,

tu peux t'inspirer du script du menu déroulant horizontal :

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
182
183
184
185
186
187
188
189
190
191
192
193
 
<!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{
 background-color: #DDDDDD;
}
 
.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;
}
 
.itemOver{
 background-color: #DDDDDD;
 /*font-weight: bold;*/
}
 
.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">
<!--
var etatMenu = 0;
var objMenu = null;
 
function MenuClic(obj)
{
  if (objMenu!=obj && objMenu!=null)
  {
   etatMenu = 0;
   fout(objMenu);
  }
 
  if (etatMenu==0)
  {
   etatMenu = 1;
   fover(obj);
  }
  else
  {
   etatMenu = 0;
   fout(obj);
  }
 
  objMenu = obj;
}
 
 
/******** 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";
   document.getElementById(obj.id+"Titre").style.borderStyle="outset";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","200");
   }
}
 
 
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";
   document.getElementById(obj.id+"Titre").style.borderStyle="inset";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
 
 
 
//-->
</script>
 
</head>
 
<body>
<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
<br />
</div>
 
<!-- Debut code HTML du menu -->
<hr class="crlf" />
<!-- Debut Menu 1 -->
<div class="menu" id="Menu1" onclick="MenuClic(this)">
  <div class="titreMenu" 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>
 
<div class="menu" id="Menu2" onclick="MenuClic(this)">
  <div class="titreMenu" 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>
 
</div>
<!-- Fin Menu 1 -->
<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>

j'ai légèrement modifié le code d'origine :

remplacement des événements onmouseover et onmouseout par onclick (je n'utilise pas de bouton mais des div) ;
ajout de la fonction MenuClic() ;
légère modification des feuilles de styles (les couleurs) ;
modification des classes du titre des menus au niveau HTML ;
légère modification des fonctions fout() et fover() au niveau de cette ligne
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
1
2
 
   document.getElementById(obj.id+"Titre").className="titreMenu";
```
(conséquence de la modification des classes des titres du menu au niveau HTML)

**cryptoo** · 07/06/2007, 08h02

merci bcp a vous deux, surtout a toi Auteur pour ton code qui marche bien

Je vais l'adapter....
Cryptoo

Menu bouton en javascript

JavaScript

Discussions similaires

Partager

Partager