liens sur menu accordeon jquery

**lamiecahuete** · 24/05/2011, 11h46

Bonjour à vous,

Je ne suis pas experte en dev. et je vais avoir besoin d'un petit coup de main car je sèche depuis hier sur un problème de code.

Voila mon code HTML dans lequel se trouve ma liste destiné à mon menu vertical :

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
148
149
150
151
152
153
154
 
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js"></script>
 
<script language="JavaScript">
 
$(document).ready(function() {
	$(".topnav").accordion({
		accordion:true,
		speed: 500,
		closedSign: '[+]',
		openedSign: '[-]'
	});
});
 
</script>
 
</head>
<body>
 
<ul class="topnav">
	<img class="titleverticalmenu" src="images/title_menueaudouce.png" alt="Eau douce"/>
	<li><a href="index_fr.php" target="scriptbreaker">Home</a></li>
	<li><a href="#">Additifs</a>
		<ul>
			 <li><a href="#">Bio-Degradeur</a></li>
		</ul>
	</li>
 
	<li><a href="#">Chauffage</a>
		<ul>
			 <li><a href="#">Newatt Pro</a></li>
			 <li><a href="#">Newattino</a></li>
			 <li><a href="#">Visi-Therm</a></li>
			 <li><a href="#">Eco-Therm</a></li>
		</ul>
	</li>
 
	<li><a href="#">Pompes</a>
		<ul>
			 <li><a href="#">Micro-Jet</a></li>
			 <li><a href="#">Mini-Jet</a></li>
			 <li><a href="#">Maxi-Jet</a></li>
			 <li><a href="#">Maxi-Jet PH</a></li>
			 <li><a href="#">New-Jet</a>
				<ul>
					<li><a href="#">NJ 400-600</a></li>
					<li><a href="#">NJ 800-1200</a></li>
					<li><a href="#">NJ 1700-2300-3000</a></li>
					<li><a href="#">NJ 4500-6000-8000</a></li>
				</ul>
			</li>
			 <li><a href="#">Newave</a></li>
		</ul>
	</li>
 
	<li><a href="#">Filtres</a>
		<ul>
			 <li><a href="#">Micro-Jet Filter</a></li>
			 <li><a href="#">Duetto</a></li>
			 <li><a href="#">Cobra</a></li>
			 <li><a href="#">Cartouches Newaqua</a>
				<ul>
					<li><a href="#">Diamante</a></li>
					<li><a href="#">Diamante Plus</a></li>
					<li><a href="#">Algo Prevent</a></li>
					<li><a href="#">Algo Out</a></li>
				</ul>
			</li>
			 <li><a href="#">Millennium</a></li>
			 <li><a href="#">Mira-Filters</a></li>
		</ul>
	</li>
 
	<li><a href="#">Mat&eacute;riel de filtration</a>
		<ul>
			 <li><a href="#">Fibre</a></li>
			 <li><a href="#">Epoonge Kinshy</a></li>
			 <li><a href="#">Microceramic</a></li>
			 <li><a href="#">Ceramic HI-Q</a></li>
			 <li><a href="#">Bioglobe</a></li>
			 <li><a href="#">Carbo-Active</a>
				<ul>
					<li><a href="#">Carbo-Active Pellets</a></li>
					<li><a href="#">Carbo-Active granules</a></li>
					<li><a href="#">Carbo-Active mixture</a></li>
				</ul>
			</li>
			 <li><a href="#">Active-Zeolite</a></li>
			 <li><a href="#">Anti-Nitrate</a></li>
			 <li><a href="#">Anti-Phosphate</a></li>
		</ul>
	</li>
 
	<li><a href="#">Accessoires</a>
		<ul>
			 <li><a href="#">Pompe &agrave; air</a>
			 	<ul>
			 		<li><a href="#">Newair</a></li>
			 	</ul>
			 </li>
			 <li><a href="#">Entretien</a>
			 	<ul>
			 		<li><a href="#">Power Gravel Cleaner</a></li>
			 	</ul>
			 </li>
			 <li><a href="#">Eclairage</a>
				<ul>
					<li><a href="#">Visi-Lux</a></li>
					<li><a href="#">Visi-Lux Caps</a></li>
					<li><a href="#">Visi-Lux E</a></li>
				</ul>
			</li>
			 <li><a href="#">Contr&ocirc;le</a>
			 	<ul>
			 		<li><a href="#">Natural Wave</a></li>
			 	</ul>
			 </li>
		</ul>
	</li>
 
	<li><a href="#">Aquariums</a>
		<ul>
			 <li><a href="#">Aquariums en verre</a>
				<ul>
					<li><a href="#">Mirabello 30</a></li>
					<li><a href="#">Mirabello 60</a></li>
					<li><a href="#">Parana 45</a></li>
					<li><a href="#">Parana 60</a></li>
					<li><a href="#">Malibu 40</a></li>
					<li><a href="#">Malibu 60</a></li>
					<li><a href="#">Arlecchino</a></li>
				</ul>
			</li>
			<li><a href="#">Aquariums en plastique</a>
				<ul>
					<li><a href="#">Veliero</a></li>
					<li><a href="#">Travel-Box</a></li>
					<li><a href="#">Box Acquario</a></li>
				</ul>
			</li>
			<li><a href="#">Aquariums boule</a>
				<ul>
					<li><a href="#">Bohemia</a></li>
				</ul>
			</li> 
		</ul>
	</li>
 
	<li><a href="#" target="_blank">Contact</a></li>
 
</ul>
 
</body>

voila le code du fichier .js

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
 
/*
 * jQuery UI Multilevel Accordion v.1
 * 
 * Copyright (c) 2011 Pieter Pareit
 *
 * http://www.scriptbreaker.com
 *
 */
 
//plugin definition
(function($){
    $.fn.extend({
 
    //pass the options variable to the function
    accordion: function(options) {
 
		var defaults = {
			accordion: 'true',
			speed: 300,
			closedSign: '[+]',
			openedSign: '[-]'
		};
 
		// Extend our default options with those provided.
		var opts = $.extend(defaults, options);
		//Assign current element to variable, in this case is UL element
 		var $this = $(this);
 
 		//add a mark [+] to a multilevel menu
 		$this.find("li").each(function() {
 			if($(this).find("ul").size() != 0){
 				//add the multilevel sign next to the link
 				$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
 
 				//avoid jumping to the top of the page when the href is an #
 				if($(this).find("a:first").attr('href') == "#"){
 		  			$(this).find("a:first").click(function(){return false;});
 		  		}
 			}
 		});
 
 		//open active level
 		$this.find("li.active").each(function() {
 			$(this).parents("ul").slideDown(opts.speed);
 			$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
 		});
 
  		$this.find("li a").click(function() {
  			if($(this).parent().find("ul").size() != 0){
  				if(opts.accordion){
  					//Do nothing when the list is open
  					if(!$(this).parent().find("ul").is(':visible')){
  						parents = $(this).parent().parents("ul");
  						visible = $this.find("ul:visible");
  						visible.each(function(visibleIndex){
  							var close = true;
  							parents.each(function(parentIndex){
  								if(parents[parentIndex] == visible[visibleIndex]){
  									close = false;
  									return false;
  								}
  							});
  							if(close){
  								if($(this).parent().find("ul") != visible[visibleIndex]){
  									$(visible[visibleIndex]).slideUp(opts.speed, function(){
  										$(this).parent("li").find("span:first").html(opts.closedSign);
  									});
 
  								}
  							}
  						});
  					}
  				}
  				if($(this).parent().find("ul:first").is(":visible")){
  					$(this).parent().find("ul:first").slideUp(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
  					});
 
 
  				}else{
  					$(this).parent().find("ul:first").slideDown(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
  					});
  				}
  			}
  		});
    }
});
})(jQuery);

C'est un menu accordeon avec un petit effet sympa voir ici le site de l'editeur
Lorsque j'intègre un lien sur l'une des rubriques principales (par exemple : Filtres) dans mon <a href="">, cette rubrique en question ne déroule plus et je n'ai plus accès aux sous-rubriques de celle-ci mais uniquement au lien que j'ai indiqué...
Que puis-je faire?? help... je n'arrive plus à réfléchir et peut être que la réponse est évidente!

Merci d'avance.

**llaffont** · 24/05/2011, 14h21

Salut,

Après plusieurs relecture j'ai enfin compris ton problème.

Une rubrique principale ne peut se voir affecter une URL sans poser de problème d'ouverture d'arborescence.

Je vais tenter de t'aider, mais avant tout j'ai besoin de savoir comment tu ouvres une URL le plus bas dans une de tes arborescences, disons "Cobra" dans filtre

.

**lamiecahuete** · 24/05/2011, 15h04

Salut et merci pour ta réponse!

j'esperais en fait au fond de moi qu'il y ai une solution pour affecter un lien mais en simultané activer l'ouverture de l'arbo.
Pour les URL au plus bas, pour en effet, par exemple Cobra, cela ne posera pas de problème je pense si je place un lien dans ma balise <a href> puisque cette rubrique ne comporte pas de sous-rubriques.

mise en situ. de ce fameux menu
Le but est que si tu clic sur Filtres, l'arbo se développe pour afficher dans le menu les différents modèles et à sa droite, l'overview de tous les filtres s'affichent

Quoi qu'il en soit, si ca ne fonctionne pas, la seule solution est de zapper ces liens, je n'aurais du coup pas de pages d'overview... mais uniquement mes pages produits... HELP!

je sais plus...! O_x

Est ce que les fichiers sources en pj peuvent aider?

**llaffont** · 24/05/2011, 15h17

Ma crainte par rapport à ce menu c'est que lorsque quelqu'un clique sur un lien cela recharge ta page complète pour afficher le contenu de ton lien et par la même occasion faire un reset de ton menu.

Si l'on test une URL directement sur une rubrique principale on voit que le menu se développe mais la page est rechargée avant qu'il n'est terminé de s'ouvrir.

Actuellement sur ton site tu n'a pas mis les liens en production donc on ne peu pas le constater

**Bovino** · 24/05/2011, 15h37

j'esperais en fait au fond de moi qu'il y ai une solution pour affecter un lien mais en simultané activer l'ouverture de l'arbo.

Donc en gros, tu veux aller sur une autre page tout en restant sur la même page, c'est ça ?

**llaffont** · 24/05/2011, 15h41

Pour peaufiner ce menu il faudrait rajouter deux-trois fonctions.

Une qui ajoute une classe "Actived" sur un élément cliquer.
Une seconde qui vérifie qu'un seul élément dispose de la classe "Actived" dans le menu
Une troisième qui déroule le menu ou l'on trouve la classe "Actived"

**llaffont** · 24/05/2011, 15h57

Envoyé par llaffont

Pour peaufiner ce menu il faudrait rajouter deux-trois fonctions.

Une qui ajoute une classe "Actived" sur un élément cliquer.
Une seconde qui vérifie qu'un seul élément dispose de la classe "Actived" dans le menu
Une troisième qui déroule le menu ou l'on trouve la classe "Actived"

Je suis con par moment j'ai pas regardé le code correctement.

en faite la solution est dans l'Ajax.
Il faut quand un lien est cliqué reconstruire ton menu en injectant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="display: block;"

sur le/les menu(s) devant être déroulé(s) puis charger ta page.

**lamiecahuete** · 24/05/2011, 16h00

Merci pour vos réflexions et votre aide!

Concernant ce que tu avance pour la reconstruction du menu dans mon code,
je dois ajouter cette fonction à quelle endroit exactement?

J'ai plutot l'habitude de travailler en xhtml/css, sortie de là, je redeviens totalement novice et puerile! navrée!

**llaffont** · 24/05/2011, 16h13

Envoyé par lamiecahuete

J'ai plutôt l'habitude de travailler en xhtml/css, [...]

Tu pourrais rester dans le HTML mais tu n'aurais pas l'interactivité du menu qui reste ouvert en fonction du lien choisi.
Maintenant, comment faire sans connaître un peu de php ou de JavaScript ça va être très difficile.

**lamiecahuete** · 24/05/2011, 16h17

Je pensais bien que cela allait être compliqué des lors ou on utilise des scripts déjà monté...
En fait, j'aurais pu me contenter d'un menu vertical en appuyant sur le CSS mais j'ai voulu essayer un peu de nouveauté

Le côté "animé" me plaisait bien dans celui ci...

Je suis foutu!

mais c'est mérité...

**llaffont** · 24/05/2011, 16h32

il faut pas voir les choses comme ça.

C'est l'occasion rêvé d'apprendre autre chose

puis cette vision n'est que la mienne Bovino te donnera peut être un autre conseil.

**Bovino** · 24/05/2011, 16h46

Envoyé par llaffont

C'est l'occasion rêvé d'apprendre autre chose

puis cette vision n'est que la mienne Bovino te donnera peut être un autre conseil.

Au contraire, je suis entièrement d'accord !

**ABCIWEB** · 25/05/2011, 01h15

Essai de mettre class="active" dans un lien du menu soit <li class="active"><a href=...

et normalement cela devrait dérouler l'arborescence jusqu'à ce niveau.

Si ça fonctionne ainsi te restera plus qu'à faire afficher class="active" en php dans tes liens en fonction de la page visitée.

**llaffont** · 25/05/2011, 08h46

Envoyé par ABCIWEB

Essai de mettre class="active" dans un lien du menu soit <li class="active"><a href=...

et normalement cela devrait dérouler l'arborescence jusqu'à ce niveau.

Si ça fonctionne ainsi te restera plus qu'à faire afficher class="active" en php dans tes liens en fonction de la page visitée.

C'est effectivement une solution entièrement HTML.

Pour chaque "aspect" de page fille tu as enrichi ton code du menu la concernant en ajoutant la class ou le style permettant d'obtenir un "display: block;"

**llaffont** · 25/05/2011, 09h13

Comme j'aime bien donner des exemples de ce que je propose en voilà un exemple modeste de ce que ça donnerais.

Je n'ai fais que les rubriques suivantes : home > Matériel de Filtration > Carbo-Active > Carbo-Active granules

Bien-sûr il faudra "linker" les styles du head mais je l'ai dis c'est modeste

Bon courage.

**lamiecahuete** · 25/05/2011, 11h36

Bonjour!

Merci beaucoup pour les réponses et conseils ainsi que le zip qui m'a beaucoup aidé.

Ca fonctionne en effet de cette façon, je perd l'animation des rubriques principales mais peut importe, je peux conserver cette structure et c'est parfait.

Merci beaucoup

**ABCIWEB** · 25/05/2011, 19h06

Envoyé par llaffont

Comme j'aime bien donner des exemples de ce que je propose en voilà un exemple modeste de ce que ça donnerais.

Je n'ai fais que les rubriques suivantes : home > Matériel de Filtration > Carbo-Active > Carbo-Active granules

Bien-sûr il faudra "linker" les styles du head mais je l'ai dis c'est modeste

Bon courage.

Nan... je vois dans ton exemple que tu utilises <ul style="display: block;"> pour afficher les menus actifs, donc deux fois si c'est un sous menu...

Tu complique les choses puisque il suffit, comme je le disais plus haut, de mettre class="active" dans le li actif et c'est tout.

J'ai repris un exemple d'une de tes pages en rendant actif le menu "Filtre" et le lien "diamente" du sous menu "Cartouches Newaqua". Comme tu le vois il suffit de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="active"><a href="#">Diamante</a></li>

Rien de plus.

Cette fonction est implémentée dans le code qui étend jquery à la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$this.find("li.active").each(function() {...

page de test

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
(function($){
    $.fn.extend({
 
    //pass the options variable to the function
    accordion: function(options) {
 
		var defaults = {
			accordion: 'true',
			speed: 300,
			closedSign: '[+]',
			openedSign: '[-]'
		};
 
		// Extend our default options with those provided.
		var opts = $.extend(defaults, options);
		//Assign current element to variable, in this case is UL element
 		var $this = $(this);
 
 		//add a mark [+] to a multilevel menu
 		$this.find("li").each(function() {
 			if($(this).find("ul").size() != 0){
 				//add the multilevel sign next to the link
 				$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
 
 				//avoid jumping to the top of the page when the href is an #
 				if($(this).find("a:first").attr('href') == "#"){
 		  			$(this).find("a:first").click(function(){return false;});
 		  		}
 			}
 		});
 
 		//open active level
 		$this.find("li.active").each(function() {
 			$(this).parents("ul").slideDown(opts.speed);
 			$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
 		});
 
  		$this.find("li a").click(function() {
  			if($(this).parent().find("ul").size() != 0){
  				if(opts.accordion){
  					//Do nothing when the list is open
  					if(!$(this).parent().find("ul").is(':visible')){
  						parents = $(this).parent().parents("ul");
  						visible = $this.find("ul:visible");
  						visible.each(function(visibleIndex){
  							var close = true;
  							parents.each(function(parentIndex){
  								if(parents[parentIndex] == visible[visibleIndex]){
  									close = false;
  									return false;
  								}
  							});
  							if(close){
  								if($(this).parent().find("ul") != visible[visibleIndex]){
  									$(visible[visibleIndex]).slideUp(opts.speed, function(){
  										$(this).parent("li").find("span:first").html(opts.closedSign);
  									});
 
  								}
  							}
  						});
  					}
  				}
  				if($(this).parent().find("ul:first").is(":visible")){
  					$(this).parent().find("ul:first").slideUp(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
  					});
 
 
  				}else{
  					$(this).parent().find("ul:first").slideDown(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
  					});
  				}
  			}
  		});
    }
});
})(jQuery);
 
$(document).ready(function() {
	$(".topnav").accordion({
		accordion:true,
		speed: 500,
		closedSign: '[+]',
		openedSign: '[-]'
	});
});
 
 
</script>
 
<style>
 
/*MenuAccordeon*/	
.topnav {
    width: 213px;
    padding: 40px 28px 25px 0;
    font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
 
ul.topnav {
    padding: 0;
    margin: 0;
    font-size: 1em;
    line-height: 0.5em;
    list-style: none;
}
 
ul.topnav li {}
 
ul.topnav li a {
    line-height: 10px;
    font-size: 11px;
    padding: 10px 5px;
    color: #000;
    display: block;
    text-decoration: none;
    font-weight: bolder;
}
 
ul.topnav li a:hover {
    background-color:#675C7C;
    color:white;
}
 
ul.topnav ul {
    margin: 0;
    padding: 0;
    display: none;
}
 
ul.topnav ul li {
    margin: 0;
    padding: 0;
    clear: both;
}
 
ul.topnav ul li a {
    padding-left: 20px;
    font-size: 10px;
    font-weight: normal;
}
 
ul.topnav ul li a:hover {
    background-color:#D3C99C;
    color:#675C7C;
}
 
ul.topnav ul ul li a {
    color:silver;
    padding-left: 20px;
}
 
ul.topnav ul ul li a:hover {
    background-color:#D3CEB8;
    color:#675C7C;
}
 
ul.topnav span{
    float:right;
}
 
 
/* Global */
#global {
	border-right: 20px solid #181A12; /* Voir -> Note 1 ci-dessous */
	color: #F0E39E;
	background: #cbd888 url(img/06-gauche.png) repeat-y left top; /* -> 1 */
}
 
/* En-tÃªte */
#entete {
	background: #181A12;
}
 
/* Navigation */
#navigation {
	background: #181A12;
}
#navigation a {
	color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}
 
/* Contenu principal */
#contenu {
	color: #363B29;
	background: url(img/06-coin.png) no-repeat left top;
}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}
 
 
/* --- POSITIONNEMENT --- */
 
/* Page */
body {
	padding: 30px 10px 0 10px;
}
#global {
	width: 90%;
	overflow: hidden; /* -> 2 */
	min-width: 700px;
	max-width: 1000px; /* -> 3 */
	margin-left: auto;
	margin-right: auto; /* -> 4 */
}
 
/* En-tÃªte */
#entete {
	padding: 20px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}
 
/* Menu de navigation */
#navigation {
	width: 230px;
	float: left; /* -> 5 */
}
#navigation ul {
	margin: 0;
	padding: 20px 10px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 1%; /* -> 6 */
	/*padding: 6px 6px 6px 10px;*/
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}
 
/* Contenu */
#contenu {
	margin-left: 220px; /* -> 7 */
	padding: 10px 20px 10px 40px;
}
#contenu > :first-child {
	margin-top: 10px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}
 
 
 
 
</style>
</head>
<body>
	<div id="global">
	<div id="entete">Entete</div>
 
	<div id="navigation">
 
<ul class="topnav">
	<img class="titleverticalmenu" src="images/title_menueaudouce.png" alt="Eau douce"/>
	<li><a href="home.html">Home</a></li>
	<li><a href="#">Additifs</a>
		<ul>
			 <li><a href="#">Bio-Degradeur</a></li>
 
		</ul>
	</li>
 
	<li><a href="#">Chauffage</a>
		<ul>
			 <li><a href="#">Newatt Pro</a></li>
			 <li><a href="#">Newattino</a></li>
			 <li><a href="#">Visi-Therm</a></li>
 
			 <li><a href="#">Eco-Therm</a></li>
		</ul>
	</li>
 
	<li><a href="#">Pompes</a>
		<ul>
			 <li><a href="#">Micro-Jet</a></li>
			 <li><a href="#">Mini-Jet</a></li>
 
			 <li><a href="#">Maxi-Jet</a></li>
			 <li><a href="#">Maxi-Jet PH</a></li>
			 <li><a href="#">New-Jet</a>
				<ul>
					<li><a href="#">NJ 400-600</a></li>
					<li><a href="#">NJ 800-1200</a></li>
 
					<li><a href="#">NJ 1700-2300-3000</a></li>
					<li><a href="#">NJ 4500-6000-8000</a></li>
				</ul>
			</li>
			 <li><a href="#">Newave</a></li>
		</ul>
	</li>
 
 
	<li><a href="#">Filtres</a>
		<ul>
			 <li><a href="#">Micro-Jet Filter</a></li>
			 <li><a href="#">Duetto</a></li>
			 <li><a href="#">Cobra</a></li>
			 <li><a href="#">Cartouches Newaqua</a>
 
				<ul>
					<li class="active"><a href="#">Diamante</a></li>
					<li><a href="#">Diamante Plus</a></li>
					<li><a href="#">Algo Prevent</a></li>
					<li><a href="#">Algo Out</a></li>
				</ul>
			</li>
 
			 <li><a href="#">Millennium</a></li>
			 <li><a href="#">Mira-Filters</a></li>
		</ul>
	</li>
 
	<li><a href="#">Mat&eacute;riel de filtration</a>
		<ul>
			 <li><a href="#">Fibre</a></li>
 
			 <li><a href="#">Epoonge Kinshy</a></li>
			 <li><a href="#">Microceramic</a></li>
			 <li><a href="#">Ceramic HI-Q</a></li>
			 <li><a href="#">Bioglobe</a></li>
			 <li><a href="Carbo-Active">Carbo-Active</a>
				<ul>
 
					<li><a href="#">Carbo-Active Pellets</a></li>
					<li><a href="Carbo-Active granules.html">Carbo-Active granules</a></li>
					<li><a href="#">Carbo-Active mixture</a></li>
				</ul>
			</li>
			 <li><a href="#">Active-Zeolite</a></li>
			 <li><a href="#">Anti-Nitrate</a></li>
 
			 <li><a href="#">Anti-Phosphate</a></li>
		</ul>
	</li>
 
	<li><a href="#">Accessoires</a>
		<ul>
			 <li><a href="#">Pompe &agrave; air</a>
 
			 	<ul>
			 		<li><a href="#">Newair</a></li>
			 	</ul>
			 </li>
			 <li><a href="#">Entretien</a>
			 	<ul>
			 		<li><a href="#">Power Gravel Cleaner</a></li>
 
			 	</ul>
			 </li>
			 <li><a href="#">Eclairage</a>
				<ul>
					<li><a href="#">Visi-Lux</a></li>
					<li><a href="#">Visi-Lux Caps</a></li>
					<li><a href="#">Visi-Lux E</a></li>
 
				</ul>
			</li>
			 <li><a href="#">Contr&ocirc;le</a>
			 	<ul>
			 		<li><a href="#">Natural Wave</a></li>
			 	</ul>
			 </li>
 
		</ul>
	</li>
 
	<li><a href="#">Aquariums</a>
		<ul>
			 <li><a href="#">Aquariums en verre</a>
				<ul>
					<li><a href="#">Mirabello 30</a></li>
 
					<li><a href="#">Mirabello 60</a></li>
					<li><a href="#">Parana 45</a></li>
					<li><a href="#">Parana 60</a></li>
					<li><a href="#">Malibu 40</a></li>
					<li><a href="#">Malibu 60</a></li>
					<li><a href="#">Arlecchino</a></li>
 
				</ul>
			</li>
			<li><a href="#">Aquariums en plastique</a>
				<ul>
					<li><a href="#">Veliero</a></li>
					<li><a href="#">Travel-Box</a></li>
					<li><a href="#">Box Acquario</a></li>
 
				</ul>
			</li>
			<li><a href="#">Aquariums boule</a>
				<ul>
					<li><a href="#">Bohemia</a></li>
				</ul>
			</li> 
		</ul>
 
	</li>
 
	<li><a href="#" target="_blank">Contact</a></li>
 
</ul>
</div>
	<div id="contenu">
	 Carbo-Active granules
	</div>
</div>
</body>
</html>

liens sur menu accordeon jquery

jQuery

Discussions similaires

Partager

Partager