Double menu déroulant

**heavenvibes** · 17/02/2009, 00h45

Bonjour,

j'ai un problème avec un menu déroulant selon le modèle de Marc Hertzog.

En fait, je souhaite avoir 2 menus déroulants dans la même page, un collé à gauche de la page, l'autre à droite, et tout ça dans un div "menucontainer".

Le problème, c'est que malgré tous mes effort avec des float:right et autres right: 0 , il n'y a rien à faire!! Les 2 menus s'affichent, mais ils restent définitivement à gauche et se chevauchent (par transparence, on voit l'autre menu dessous).

Je vous mets le code qui ressemble encore beaucoup à celui d'origine, sauf que j'ai 2 id menuderoulant : menuderoulantleft et menuderoulantright, dont j'espérais qu'en changeant simplement le float, ça aurait marché!!! J'ai même essayé 2 div (menuleft et menuright) encapsulant chaque menu afin de les séparer, mais sans effet!!!

La page html (de test, donc hyper simple)

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
 
<body>
  <div class="container">
    <div class="header">
      <div class="logo">
      </div>
    </div>
    <div class="menucontainer">
      <div id="menuleft">
        <ul id="menuDeroulantleft">
          <li>
            <a href="#">Partie 1</a>
            <ul class="sousMenu">
              <li><a href="#">Partie 11</a></li>
              <li><a href="#">Partie 12</a></li>
              <li><a href="#">Partie 13</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Partie 2</a>
            <ul class="sousMenu">
              <li><a href="#">Partie 21</a></li>
              <li><a href="#">Partie 22</a></li>
              <li><a href="#">Partie 23</a></li>
              <li><a href="#">Partie 24</a></li>
              <li><a href="#">Partie 25</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Partie 3</a>
            <ul class="sousMenu">
              <li><a href="#">Partie 31</a></li>
              <li><a href="#">Partie 32</a></li>
              <li><a href="#">Partie 33</a></li>
              <li><a href="#">Partie 34</a></li>
              <li><a href="#">Partie 35</a></li>
              <li><a href="#">Partie 36</a></li>
              <li><a href="#">Partie 37</a></li>
              <li><a href="#">Partie 38</a></li>
              <li><a href="#">Partie 39</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="menuright">-->
        <ul id="menuDeroulantright">
          <li>
            <a href="#">Partie 1</a>
            <ul class="sousMenu">
              <li><a href="#">Partie 11</a></li>
              <li><a href="#">Partie 12</a></li>
              <li><a href="#">Partie 13</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Partie 2</a>
            <ul class="sousMenu">
              <li><a href="#">Partie 21</a></li>
              <li><a href="#">Partie 22</a></li>
              <li><a href="#">Partie 23</a></li>
              <li><a href="#">Partie 24</a></li>
              <li><a href="#">Partie 25</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Partie 3</a>
              <li><a href="#">Partie 31</a></li>
              <li><a href="#">Partie 32</a></li>
              <li><a href="#">Partie 33</a></li>
              <li><a href="#">Partie 34</a></li>
              <li><a href="#">Partie 35</a></li>
              <li><a href="#">Partie 36</a></li>
              <li><a href="#">Partie 37</a></li>
              <li><a href="#">Partie 38</a></li>
              <li><a href="#">Partie 39</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <br><br>
  Test 			
 
 
</body>

Ainsi que le code CSS correspondant:

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
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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
 
body
{
 font: 15px verdana, sans-serif;
 margin: 0;
 padding: 0;
}
 
.menucontainer 
{
 background-image: url(../../data/layout/menu_deroulant.gif);
 background-repeat: repeat-x;
 height: 20px;
 padding: 0px;
}
 
.container 
{
 width: 100%;
 border: 0;
}
 
.header 
{
 height: 48px;
 background-image: url(../../data/layout/header_bg.jpg);
 background-repeat: repeat-x;
}
 
.menuleft 
{
 position: absolute;
 height: 20px;
 float: left;
 left: 0;
}
 
.menuright
{
 position: absolute;
 height: 20px;
 float: right;
 right: 0;
}
 
#menuDeroulantleft
{
 position: absolute;
 /*width: 644px;*/
 height: 20px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 color: #003366;
 text-align: center;
}
 
#menuDeroulantleft li
{
 font-weight: bold;
 float: left;
 width:auto;
 margin: 0;
 padding: 0;
 border: 0;
 color: #003366;
}
 
#menuDeroulantleft .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 text-align: left;
}
 
#menuDeroulantleft .sousMenu li
{
 /*width: auto;*/
 font-weight:normal;
 font-size: 13px;
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
 
#menuDeroulantleft li a:link, #menuDeroulantleft li a:visited
{
 display: block;
 height: auto;
 color: #003366;
 /*background: #3399CC;*/
 margin: 0;
 padding: 1px 20px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
 
#menuDeroulantleft li a:hover { /*background-color: #FF6600;*/ color:#336699; }
/*#menuDeroulant li a:active { background-color: #CC0000; color:#6699CC }*/
 
#menuDeroulantleft .sousMenu li a:link, #menuDeroulantleft .sousMenu li a:visited
{
 display: block;
 color: #000;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("../../data/layout/fondTR.png") repeat;
 background-color: #F0F0F0;
}
 
#menuDeroulantleft .sousMenu li a:hover
{
 background-image: none;
 background-color: #FF6600;
 color: #FFFFFF;
}
 
#menuDeroulantleft .sousMenu li a:active
{
 background-image: none;
 background-color: #CC0000;
 color: #FFFFFF;
}	
 
#menuDeroulantleft .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 250px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
 
#menuDeroulantleft .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
 
#menuDeroulantleft li:hover > .sousMenu { display: block; }	
 
 
#menuDeroulantright
{
 position: absolute;
 /*width: 644px;*/
 height: 20px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 color: #003366;
 text-align: center;
}
 
#menuDeroulantright li
{
 font-weight: bold;
 float: right;
 width:auto;
 margin: 0;
 padding: 0;
 border: 0;
 color: #003366;
}	
 
#menuDeroulantright .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 text-align: left;
}
 
#menuDeroulantright .sousMenu li
{
 /*width: auto;*/
 font-weight:normal;
 font-size: 13px;
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
 
#menuDeroulantright li a:link, #menuDeroulantright li a:visited
{
 display: block;
 height: auto;
 color: #003366;
 /*background: #3399CC;*/
 margin: 0;
 padding: 1px 20px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
 
#menuDeroulantright li a:hover { /*background-color: #FF6600;*/ color:#336699; }
/*#menuDeroulantright li a:active { background-color: #CC0000; color:#6699CC }*/
 
#menuDeroulantright .sousMenu li a:link, #menuDeroulantright .sousMenu li a:visited
{
 display: block;
 color: #000;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("../../data/layout/fondTR.png") repeat;
 background-color: #F0F0F0;
}
 
#menuDeroulantright .sousMenu li a:hover
{
 background-image: none;
 background-color: #FF6600;
 color: #FFFFFF;
}
 
#menuDeroulantright .sousMenu li a:active
{
 background-image: none;
 background-color: #CC0000;
 color: #FFFFFF;
}
 
#menuDeroulantright .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 250px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}	
 
#menuDeroulantright .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
 
#menuDeroulantright li:hover > .sousMenu { display: block; }

Voilà, là je dois avouer que je sèche!!! J'ai modifié certains paramètres de taille afin de coller au modèle du site intranet de mon entreprise, seulement il nous est impossible d'accéder au code source de ce site (accès protégé et GPO dans tous les sens) .

C'est pour ça que je dois développer une partie du code chez moi, l'exemple donné (et défectueux) est donc visible à l'adresse suivante : Page de test

Si quelqu'un sait où je me suis trompé, je suis preneur de toute explication, car je débute en CSS (enfin, je ne suis jamais allé jusqu'à créer un menu en CSS pur).

Merci d'avance pour votre aide!

**heavenvibes** · 17/02/2009, 01h11

Ben j'ai trouvé la solution, ça faisait depuis hier que je cherchais!!!

En fait, j'utilise Dreamweaver, et j'ai découvert une fonction que je ne connaissais pas dans l'affichage fractionné : le glisser-déplacer!!! Je ne savais pas que c'était faisable et que le code CSS était modifié à la volée!!!

J'ai donc déplacer mon menuderoulantright à peu près à la position voulue, j'ai cherché dans le code ce qui a été modifié. Dreamweaver a placé des coordonnées fixes dans #menuDeroulantright, que j'ai juste modifié par un right: 0; .

Ce qui donne:

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
 
#menuDeroulantleft
{
	position: absolute;
	/*width: 644px;*/
        height: 20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: #003366;
	text-align: center;
	width: 413px;
	left: 0;
}
#menuDeroulantright
{
	position: absolute;
	/*width: 644px;*/
        height: 20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: #003366;
	text-align: center;
	right: 0;
}

J'ai pu supprimer les div menuleft et menuright que j'avais créé en plus!

Voilà, j'espère que ça pourra en aider d'autres!!!

Double menu déroulant

CSS

Vue hybride

Discussions similaires

Partager

Partager