[HTML,CSS]Menu, lien.. lire svp je ne sais pas comment expliquer

Version imprimable

16/08/2006, 12h54
keishah

[HTML,CSS]Menu, lien.. lire svp je ne sais pas comment expliquer

Bonjour je voudrai faire un menu comme ca

+ Menu1
+ Menu2
|
|
+ Menu10

et quand on clique sur Menu1 par exemple ca donne

- Menu1
- SousMenu1.1
- SousMenu1.2
+ Menu2
|
|
+ Menu10

et quand on clique sur Menu2 ou autre les sousMenu1.1... disparaissent xD

voila si vous avez compris c'est bien lol donc si vous connaissez des Tutos pour fair ça merci :)
16/08/2006, 13h18
Freed0

J'ai pas vraiment de lien mais cherche du coté des menus en JavaScript ;)

Hello keishah,

Voilà un petit exemple que j'ai rapidement fait

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
</head>
<style>
	li {
		list-style: none;
	}
	.menu {
		color: #444;
	}
	.menu_actif {
		color: #f00;
	}
	.sous_menu {
		display: none;
	}
	.sous_menu_actif {
		color: #444;
		display: block;
	}
</style>
<script>
	var actif = '';
	function active(elt_name) {
		if (elt_name == actif) {
			desactive(actif);
		}
		else if (elt_name != actif) {
			desactive(actif);
			sous_menu = 's' + elt_name;
			document.getElementById(elt_name).className = 'menu_actif';
			document.getElementById(sous_menu).className = 'sous_menu_actif';
		}
		actif = elt_name;
	}
 
	function desactive(elt_name) {
		if (actif != '') {
			sous_menu = 's' + elt_name;
			document.getElementById(elt_name).className = 'menu';
			document.getElementById(sous_menu).className = 'sous_menu';
		}
		actif = '';
	}
</script>
<body>
	<ul>
		<li id="m1" class="menu" onclick="active('m1');">menu 1</li>
		<ul id="sm1" class="sous_menu">
			<li>menu 1.1</li>
			<li>menu 1.2</li>
		</ul>
		<li id="m2" class="menu" onclick="active('m2');">menu 2</li>
		<ul id="sm2" class="sous_menu">
			<li>menu 2.1</li>
			<li>menu 2.2</li>
		</ul>
		<li id="m3" class="menu" onclick="active('m3');">menu 3</li>
		<ul id="sm3" class="sous_menu">
			<li>menu 3.1</li>
			<li>menu 3.2</li>
		</ul>
	</ul>
</body>
</html>

16/08/2006, 13h26
keishah

merci j'vais voir ce que ca donne

et pour les + qui ce transforme en - xD
16/08/2006, 13h36
keishah

heu j'arrive pas a associer ton code avec le mien
http://mathis59.free.fr/
voila le site que je suis en train de fair..

si vous voulez le code pour le menu dite le moi !!
16/08/2006, 13h37
pontus21

En CSS, tu peux faire presque ce que tu désires ...
Va voir là : http://web.developpez.com/tutoriel/x...uderoulantcss/

Keishah,

J'ai un petit peu repris le début de ton design que j'ai passé en full div et j'y ai intégré l'exemple de menu que je t'ai donné plus haut

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
<style>
	body {
		background-color: #EF2A22;
		text-align: center;
	}
	li {
		list-style: none;
	}
	#container {
		width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
	#header {
		width: 800px;
		height: 200px;
		background: url(theme/img/haut.jpg);
	}
	#body {
		width: 800px;
		background: #000;
	}
	#menu {
		text-align: left;
		width: 155px;
		height: 200px;
		float: left;
		margin: 0;
		padding: 0;
		background: #000;
	}
	#menu a {
		color: #fff;
		text-decoration: none;
	}
	#content {
		width: 645px;
		height: 200px;
		float: left;
		background: #000;
	}
	#footer {
		clear: left;
	}
	#menu ul {
		margin: 0;
		padding: 0;
	}
	.menu, .menu_actif {
		width:100px;
    height:15px;
    background-color:#EF2A22;
    color:#ffffff;
    border-color:#000000;
    border-width:1px;
    border-style:solid;
    font-size:15px;
    text-align:center;
    text-decoration:none;
    margin-top:2px;
	}
	.sous_menu {
		background: #000;
		margin: 0;
		display: none;
	}
	.sous_menu li {
		list-style: none;
	}
	.sous_menu_actif {
		background: #000;
		display: block;
		list-style: none;
	}
	.sous_menu_actif li {
		list-style: none;
	}
 
 
</style>
<script>
	var actif = '';
	function active(elt_name) {
		if (elt_name == actif) {
			desactive(actif);
		}
		else if (elt_name != actif) {
			desactive(actif);
			sous_menu = 's' + elt_name;
			document.getElementById(elt_name).className = 'menu_actif';
			document.getElementById(sous_menu).className = 'sous_menu_actif';
		}
		actif = elt_name;
	}
 
	function desactive(elt_name) {
		if (actif != '') {
			sous_menu = 's' + elt_name;
			document.getElementById(elt_name).className = 'menu';
			document.getElementById(sous_menu).className = 'sous_menu';
		}
		actif = '';
	}
</script>
</head>
 
<body>
	<div id="container">
		<div id="header"></div>
		<div id="body">
  		<div id="menu">
  			<ul>
  				<li id="m1" class="menu" onclick="active('m1');">blog</li>
  		  	<ul id="sm1" class="sous_menu">
  		  		<li class="sm"><a href="#">ma vie de punk!!</a></li>
          	<li class="sm"><a href="#">musique</a></li>
          	<li class="sm"><a href="#">autres...</a></li>        
  				</ul>
    			<li id="m2" class="menu" onclick="active('m2');">media</li>
  				<ul id="sm2" class="sous_menu">
  		  		<li class="sm"><a href="#">sons</a></li>
          	<li class="sm"><a href="#">vid&eacute;o</a></li>
          	<li class="sm"><a href="#">photo</a></li>        
  				</ul>
  			</ul>
  		</div>
		</div>
		<div id="content"></div>
		<div id="footer">&copy;2006 - Matthieu Lhonneux - </div>
	</div>
</body>
</html>

Il faudra peut-être que tu modifie le chemin de l'image dans la partie css.