pb avec menu

**sharpeye** · 08/04/2006, 17h16

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

<head> :

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
<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 :

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
<!-- 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.

**Maxoo** · 08/04/2006, 21h50

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

**jp949** · 09/04/2006, 06h51

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>

**TabrisLeFol** · 09/04/2006, 09h28

Envoyé par Maxoo

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

Avec ton navigateur et la version.

Et la source en question, pourrait être un plus.
Déjà, il faut que javascript soit activé pour avoir le menu...

**sharpeye** · 10/04/2006, 10h46

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

**blueice** · 10/04/2006, 10h53

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 :

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
 
<!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>

**sharpeye** · 10/04/2006, 10h56

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

Reponse demain, je l'espere, positive !!

pb avec menu

HTML

Vue hybride

Discussions similaires

Partager

Partager