menu avec sous menu

Version imprimable

12/11/2008, 19h27
kate59

menu avec sous menu

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
14/11/2008, 22h31
devyan

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+

Voici un petit exemple rapide...

CSS

Code:

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:

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:

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>

:ccool:

16/11/2008, 21h51
Auteur

bonjour,

tu as un exemple dans la galerie CSS :
http://css.developpez.com/galerie/?p...orizontaux#MH4 qui n'utilise pas JQuery ;)
17/11/2008, 16h54
devyan

Citation:

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...
17/11/2008, 17h01
Auteur

Citation:

Envoyé par devyan

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

soit....

Citation:

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 :aie:
17/11/2008, 17h44
devyan

1 pièce(s) jointe(s)

Citation:

Envoyé par Auteur

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

:lol:

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 :P