menu avec sous menu [Fait]

**kate59** · 12/11/2008, 19h27

bonjour,
voila j ai adorer le menu vu sur ce site
http://www.id-interactive.fr/design-site-internet.html
et qui vraiment bien mais je n ai pas trouver de site en javascript et css qui pourrait faire cela auriez vous une solution ? MERCI

**devyan** · 14/11/2008, 22h31

Salut,

Le site que tu donnes en exemple a en fait un menu horizontal sur 2 niveaux.

Le survol d'un élément du premier niveau fait apparaître le second niveau correspondant à la place.

Si tu veux "t'amuser" à le faire toi-même il y a de très bons tutoriels sur ce sujet (menu horizontal)

A+

**devyan** · 14/11/2008, 23h53

Voici un petit exemple rapide...

CSS

Code :

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

1
2
3
4
5
6
7
8
	.menu {line-height: normal; font-size: 93%; display: block; float: left; margin: 0; padding: 0;}
	.niveau1,
	.niveau2 {padding: 10px 10px 10px 10px; margin: 0px; 
			  list-style-image: none; list-style-position: outside; list-style-type: none; 
			  display: inline-block; position: relative;}
/*	.niveau2 {display:none;} */
	.menu_item,
	.sub_item {float: left; margin:0 2px; padding:0 9px; display: list-item; position: relative;}

JAVASCRIPT (jQuery)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="./jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	/* mise en place des évènements du menu déroulant */
	$(".sub_item").css("cursor", "pointer");
	$(".menu_item").css("cursor", "pointer").hover(function() {
		$(".niveau2").hide();
		$("#menu_"+$(this)[0].id).show();
	});
	/* mise en forme de l'option de menu sélectionnée */
	var it = window.location.hash;
	$("a[href$="+it+"]", ".niveau2").css("font-style","italic").css("font-weight","bold");
});
</script>

Html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div class="sub_menu" style="position: absolute; display:block; top:5px; left:0; width:auto; height:30px; margin:0 10px; background:yellow;">
	<ul class="niveau1" style="background:olive;">
		<li id="item1" class="menu_item" style="background:orange;">Item 1</li>
		<li id="item2" class="menu_item" style="background:orange;">Item 2</li>
		<li id="item3" class="menu_item" style="background:orange;">Item 3</li>
		<li id="item4" class="menu_item" style="background:orange;">Item 4</li>
		<li id="item5" class="menu_item" style="background:orange;">Item 5</li>
	</ul>
</div>
<div class="menu" style="position: absolute; display:block; top:50px; left:0; width:auto; height:30px; margin:0 10px; background:yellow;">
	<ul id="menu_item1" class="niveau2" style="background:olive;">
		<li id="item11" class="sub_item" style="background:orange;">Item 1-1</li>
		<li id="item12" class="sub_item" style="background:orange;">Item 1-2</li>
		<li id="item13" class="sub_item" style="background:orange;">Item 1-3</li>
		<li id="item14" class="sub_item" style="background:orange;">Item 1-4</li>
		<li id="item15" class="sub_item" style="background:orange;">Item 1-5</li>
	</ul>
	<ul id="menu_item2" class="niveau2" style="background:olive;">
		<li id="item21" class="sub_item" style="background:orange;">Item 2-1</li>
		<li id="item22" class="sub_item" style="background:orange;">Item 2-2</li>
		<li id="item23" class="sub_item" style="background:orange;">Item 2-3</li>
	</ul>
	<ul id="menu_item4" class="niveau2" style="background:olive;">
		<li id="item41" class="sub_item" style="background:orange;">Item 4-1</li>
		<li id="item42" class="sub_item" style="background:orange;">Item 4-2</li>
		<li id="item43" class="sub_item" style="background:orange;">Item 4-3</li>
		<li id="item44" class="sub_item" style="background:orange;">Item 4-4</li>
		<li id="item45" class="sub_item" style="background:orange;">Item 4-5</li>
		<li id="item46" class="sub_item" style="background:orange;">Item 4-6</li>
	</ul>
</div>
</body>
</html>