menu déroulant qui pousse les autres éléments

**JackBeauregard** · 10/05/2007, 19h06

Bonjour,

J'essaie de faire un menu déroulant horizontal sur mon site.

Le problème, sans doute classique, c'est que ça pousse les éléments en dessous.

Le code HTML :

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
 
 
 
 
<script type="text/javascript">
<!--
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';}
}
//-->
</script>
<style type="text/css" media="screen">
<!-- 
 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
 
-->
</style>
 
</head>
 
<body>
 
 
<div class="thematique">
<div id="menu">
 
 
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
 
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
 
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
 
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
 
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
 
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
 
					<li><a href="#">Sous-Menu 3.2</a></li>
 
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
 
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
 
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
 
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
 
			</dd>
	</dl>
 
 
</div><!-- ferme menu -->
</div><!-- ferme themactic -->
 
<div class="lettre></div>

Le code CSS de la div lettre :

Code :

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

1
2
3
4
5
6
7
8
9
.lettre 
{
background-color:#EEEEEE;
font-weight:bold;
text-align:center;
padding-top:4px;
padding-bottom:2px;
margin-bottom:15px;
}

Voilà, donc le menu se déroule, mais la div lettre est poussée vers le bas.

Vous connaissez le problème ?

**JackBeauregard** · 11/05/2007, 02h08

Bon voilà, j'ai fait une page de test, vous pouvez voir le problème ici, le css et le javascript sont dans les balises head :

http://www.soins-nature.com/menu.php

Merci d'avance.

**Bisûnûrs** · 11/05/2007, 09h09

Code :

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

position:absolute;

sur tes sous-menus.

**JackBeauregard** · 11/05/2007, 13h10

Salut Bisûnûrs, merci de ta réopnse

Je viens de faire ça :

Code :

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

1
2
3
4
5
6
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
position:absolute;
}

Maintenant, je n'ai plus que le menu 3 qui est collé à gauche, mais en effet il ne pousse pas la div du dessous.
C'est pas encore ça quand même...

**edit**

Ah je viens de le placer dans le li comme ça :

Code :

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

1
2
3
4
5
#menu li {
text-align: center;
background: #fff;
position:absolute;
}

Ca a l'air beaucoup mieux, mais je ne vois pas pourquoi ça modifie l'aspect des menus déroulants.

**edit2**

En fait ce n'est pas le seul problème, je viens de voir que seul le premier lien du menu déroulant apparaît...

**Bisûnûrs** · 11/05/2007, 13h52

Code :

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

1
2
3
4
#menu dd {
border: 1px solid gray;
position:absolute;
}

**JackBeauregard** · 11/05/2007, 14h36

D'accord, c'est beaucoup mieux, en effet. Les listes se déroulent et les div du dessous sont survolées et non poussées. Merci

Je n'arrive pas à avoir un effet de rollover 100% de la ligne sous IE : si je met 100% ça ne fait un lien que sur le mot, si je veux avoir toute la ligne, je dois entrer une taille fixe pour le lien, genre 180px.

Et puis je ne comprend pas pourquoi je ne peux pas centrer le menu à l'intérieur de la barre bleu.

**edit**

je redonne le lien de test, pour éviter de chercher dans le topic :

http://www.soins-nature.com/menu.php

**JackBeauregard** · 11/05/2007, 21h55

Bon le reste est résolu, mais j'ai un souci sur la page où le script doit fonctionner :

Lors de l'affichage, les menus apparaissent déroulés un bref instant, genre 0.5 secondes, puis se referment. Ensuite ça fonctionne normalement.

Pourtant je n'ai rien changé entre la page de test et la page définitive.

A quoi cela peut-il être dû, à votre avis ?

**edit**

je viens de trouver, y'avait une iframe en bas de la page et en l'enlevant ça fonctionne bien. Mais je ne comprend pas pourquoi ça fait ça, surtout que j'ai besoin de mon iframe.

**JackBeauregard** · 11/05/2007, 23h31

Bon je parle un peu tout seul depuis tout à l'heure, mais c'est pas grave, je persévère.

Voilà, quand mon menu se déroule, il survole d'autres div où il y a des liens. Et bien sur IE, si jamais il y a un lien quelque part sous le menu déroulant, hop, celui-ci se referme.

Vous voyez à quoi c'est dû, SVP ?

Je crois que c'est un problème javascript, en fait maintenant :
ça c'est le code :

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
 
Code dans les balises HEAD : 
 
<script type="text/javascript">
<!--
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';}
}
//-->
</script>
 
Code dans les liens du menu déroulant :
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">

**JackBeauregard** · 12/05/2007, 01h21

Non en fait c'est pas ça, j'ai essayé en virant les liens du dessous et en fait dès que le curseur a passé le premier <li>, hop la ligne se ferme (sous IE).

**JackBeauregard** · 12/05/2007, 02h33

Le résultat qui plante est ici : http://www.soins-nature.com/menu

menu déroulant qui pousse les autres éléments

CSS

Discussions similaires

Partager

Partager