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

**keishah** · 16/08/2006, 12h54

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

**Freed0** · 16/08/2006, 13h18

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

**sedryk** · 16/08/2006, 13h20

Hello keishah,

Voilà un petit exemple que j'ai rapidement fait

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

**keishah** · 16/08/2006, 13h26

merci j'vais voir ce que ca donne

et pour les + qui ce transforme en - xD

**keishah** · 16/08/2006, 13h36

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

**pontus21** · 16/08/2006, 13h37

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

**sedryk** · 17/08/2006, 11h05

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 :

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

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

CSS

Vue hybride

Discussions similaires

Partager

Partager