Faire des menus déroulants

Version imprimable

05/03/2007, 16h33
laurentSc

Faire des menus déroulants

Peut-on me dire comment faire des menus déroulants ? Je crois que ça ne peut se faire qu'en javascript... Merci d'avance.

Tu fais comme ca en html

Code:

1
2
3
4
5
6
7
 
<select name='select'>
   <option>Champ 1 </option>
   <option>Champ 2 </option>
   <option>Champ 3 </option>
   <option>Champ 4 </option>
</select>

Voila

05/03/2007, 17h35
XtoX

Tu peux faire ça en utilisant que des css. Maintenant, ça se complique quand tu veux que ça tourne sur n'importe quel navigateur.

Xavier
05/03/2007, 17h54
Auteur

en javascript :
Menu horizontal
Menu vertical
05/03/2007, 22h09
laurentSc

Citation:

Envoyé par Auteur

en javascript :
Menu horizontal

Merci pour la réponse ; je l'adopte ; mais si on veut intercaler des items sans menu déroulant, comment fait-on ? Pour l'instant, je fais des menus déroulants, même ds ce cas !

Citation:

Envoyé par laurentSc

Merci pour la réponse ; je l'adopte ; mais si on veut intercaler des items sans menu déroulant, comment fait-on ? Pour l'instant, je fais des menus déroulants, même ds ce cas !

Pour le div MenuXItem, n'applique pas le style "contenuMenu". Applique le display="none" et la position="absolute". Mais le script mettra à block, donc pour contrer ça ajoute également un visibility="hidden". Par contre. Le div MenuXItem même vide est nécessaire pour éviter un plantage du script (et puis par la suite, tu pourras rajouter des items ;).
Code:

1 2 3 4 5 6 7 8 9 10 11  <div class="menu" id="Menu4" onmouseout="fout(this)" onmouseover="fover(this)"> <div class="titreMenu itemOut" id="Menu4Titre">Menu 4</div> <div style="display: none; visibility: hidden; position: absolute;" id="Menu4Item">   </div> </div> 

05/03/2007, 22h45
laurentSc

Il manque qq chose, c'est clair, car il n'y a plus de lien :?

Tiens :

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
 
<?xml version="1.0" encoding="utf-8"?>
<!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>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<script type="text/javascript">
<!--
window.onload=show;
function show(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" title="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
 
body
{
	font-family: verdana, arial, sans-serif;
	font-size: 90%;
}
a {
text-decoration: none;
color: black;
color: #222;
}
dl, dt, dd, ul, li {
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
 
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border:1px 1px 0 0;
border-color:gray;
border-style:solid;
}
#menu dd {
border: 2px solid gray;
border-top:0;
margin:0 -1px;
}
#menu li {
text-align: center;
background: white;
}
#menu li a, #menu dt a {
color: black;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
/* ]]> */
</style>
</head>
<body>
<div id="menu">
	<dl>
		<dt onmouseover="javascript:show();"><a href="#" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
 
	<dl>			
		<dt onmouseover="javascript:show('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:show('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:show('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:show('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>
</body>
</html>

05/03/2007, 23h19
laurentSc

Je connaissais déjà cette technique, mais je voulais l'abandonner, car une fois qu'on a affiché un sous-menu, si on descend ds la page, il reste affiché. Cela dit, avec ton autre technique, je m'en suis sorti, en rajoutant les liens qui manquaient.
05/03/2007, 23h56
blueice

Suffit de faire un timeout...

Code:

1 2 3 4 5 6 7 8 9 10 11  <div class="menu" id="Menu4" onmouseout="fout(this)" onmouseover="fover(this)"> <div class="titreMenu itemOut" id="Menu4Titre"><a href="#" class="lienMenu">Menu 4</a></div> <div style="display: none; visibility: hidden; position: absolute;" id="Menu4Item">   </div> </div> 
:question:

ou alors je n'ai pas compris ta question :

Citation:

Envoyé par laurentSc

Merci pour la réponse ; je l'adopte ; mais si on veut intercaler des items sans menu déroulant, comment fait-on ? Pour l'instant, je fais des menus déroulants, même ds ce cas !

06/03/2007, 07h56
laurentSc

Merci pour la réponse ; tu avais parfaitement compris, sauf que ce n'était pas une question : je l'avais fait moi-même ! Par contre, une autre question : est-il possible de faire des sous-sous-menus et si oui, comment ?
06/03/2007, 07h58
laurentSc

Citation:

Envoyé par blueice

Suffit de faire un timeout...

Peux-tu préciser ? Je veux bien ajouter un timeout, mais je ne vois pas où.
06/03/2007, 12h05
Auteur

Citation:

Envoyé par laurentSc

Merci pour la réponse ; tu avais parfaitement compris, sauf que ce n'était pas une question : je l'avais fait moi-même ! Par contre, une autre question : est-il possible de faire des sous-sous-menus et si oui, comment ?

Non désolé, je n'ai pas prévu ce genre de possibilité avec ce script.