pb avec menu

Version imprimable

pb avec menu

voila, j'ai trouvé un code pour des menu ou on voit le sous menu, mais ca marche pas :

<head> :

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
<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">
<!--
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}
 
#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
 
#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}
 
#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}
 
#menu li a:hover {
text-decoration: underline;
}
 
 
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
-->
</style>

puis dans <head> :

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
<!-- Menu  -->
<dl id="menu">
		<dt onmouseover="javascript:montre('smenu1');"><a href="#">Peintures</a></dt>
 
  <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> 
    <ul>
      <li><a href="#">Abstraites</a></li>
      <li><a href="#">Figuratives</a></li>
    </ul>
  </dd>	
 
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Motivation artistique</dt>
 
  <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> 
    <ul>
      <li><a href="#">Sub Menu 2.1</a></li>
      <li><a href="#">Sub Menu 2.2</a></li>
    </ul>
  </dd>	
 
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
 
  <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> 
    <ul>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
    </ul>
  </dd>
 
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt>
 
  <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> 
    <ul>
      <li><a href="#">Sub Menu 4.1</a></li>
      <li><a href="#">Sub Menu 4.1</a></li>
    </ul>
  </dd>
</dl>

Merci d'une aide pour que ca puisse fonctionner, ou alors de me donnée un autre moyen de faire la meme chose. :)

08/04/2006, 21h50
Maxoo

Et tu peux nous dire ce qui ne va pas ? histoire qu'on sache ...
09/04/2006, 06h51
jp949

La derniere partie du code que tu donnes contrairement a ce que tu as ecrit ne se place pas dans le <head> mais dans le <body>ici le code html</body>
09/04/2006, 09h28
TabrisLeFol

Citation:

Envoyé par Maxoo

Et tu peux nous dire ce qui ne va pas ? histoire qu'on sache ...

Avec ton navigateur et la version. :roll:
Et la source en question, pourrait être un plus.
Déjà, il faut que javascript soit activé pour avoir le menu...
10/04/2006, 10h46
sharpeye

ben j utlise IE6, le javascript est bien activé, et j ai bien pris mon CSS la dans l 'adresse parce que je connais pas....donc faut bien s aider. C'est quand meme pas un delit ?

Sinon, quand je passe la souris, ben le sous menu s affiche pas...en fait c comme si rien ne se passait. :-(

Voila. Merci :)

PS : Je m'etait effectivement trompé, mais que dans le message, la deuxieme partie est dans Body :)

Je doute que tu fasses ce qu'il faut...

Voici le code à copier coller dans ta page HTML :
Tu touches à rien et tu testes...

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>un menu vertical déroulant en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<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">
<!--
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}
 
#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
 
#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}
 
#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}
 
#menu li a:hover {
text-decoration: underline;
}
 
 
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
-->
</style>
 
</head>
<body>
 
<!-- Menu  -->
<dl id="menu">
		<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Menu 1</a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<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>
				</ul>
			</dd>	
 
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
				</ul>
			</dd>	
 
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
 
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>
 
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
</dl>
 
 
 
</body>
</html>

10/04/2006, 10h56
sharpeye

ok..
Je teste ca des ce soir alors. Merci bien :)

Reponse demain, je l'espere, positive !!