menu avec sous menu [Fait]

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

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, 23h31

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** · 15/11/2008, 00h53

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>

**Auteur** · 16/11/2008, 22h51

bonjour,

tu as un exemple dans la galerie CSS :
http://css.developpez.com/galerie/?p...orizontaux#MH4 qui n'utilise pas JQuery

**devyan** · 17/11/2008, 17h54

Envoyé par Auteur

bonjour,

tu as un exemple dans la galerie CSS :
http://css.developpez.com/galerie/?p...orizontaux#MH4 qui n'utilise pas JQuery

Pour la partie XHTML j'ai utilisé JQuery pour aller plus vite

Par contre ton exemple de la galerie n'utilise pas les UL/LI mais des SPAN...

**Auteur** · 17/11/2008, 18h01

Envoyé par devyan

Pour la partie XHTML j'ai utilisé JQuery pour aller plus vite

soit....

Envoyé par devyan

Par contre ton exemple de la galerie n'utilise pas les UL/LI mais des SPAN...

et ? au moins tu n'as pas à faire des float sur les li

**devyan** · 17/11/2008, 18h44

Envoyé par Auteur

et ? au moins tu n'as pas à faire des float sur les li

Exact, mais je pense que les "float" peuvent être évités (même pour la compatibilité avec FF2 et IE6) j'ai déjà réussi à les éliminer dans d'autres cas

(je me suis fait des tags genre "80x15" en CSS, c.f. pièce jointe, c'est plus souple que de simples images et la solution sans float que j'utilise peut peut-être s'adapter aux menus UL/LI)

Remarque: le tag est compatible IE6 également, c'est la page dans laquelle je l'utilise qui ne l'est pas

menu avec sous menu [Fait]

CSS

Discussions similaires

Partager

Partager