ul déroulable simple

Version imprimable

Bonjour tout le monde.

J'ai une liste très simple, sous la forme :
Code:

1 2 3 4 5 6 7 8 9 10 <ul class="ulext"> <li><a>Lien 1</a></li> <li> <a>Lien 2</a> <ul class="ulext"> <li><a>Lien 2.1</a></li> <li><a>Lien 2.2</a></li> </ul> </li> </ul>
Ce que je cherche à faire, avec jQuery 1.4.2, c'est avoir cette liste sous forme déroulante.

C'est à dire qu'au début on ne doit voir que les li de premier niveau.
Ensuite, sur un mouseover, le li affiche le ul enfant s'il existe et sur le mouseout le cache de nouveau.
Cela doit être récursif (pour le ul des li contenant eux-même un ul...).

Je suppose que c'est un besoin fréquent mais je n'ai trouvé que des tutoriaux sur des menus customisés, moi je cherche vraiment le plus simple.

J'ai essayé de plusieurs manières différentes mais à chaque fois j'ai le même problème...
Je n'ai pas trop envie d'étaler mon code erroné ici car je pense être parti dans une "mauvaise direction". Je suis à la recherche d'une autre direction :) C'est pourquoi je ne cherche pas une solution à mon erreur mais bien une solution simple que vous pourriez me proposer ? Ou la façon dont vous vous y prendriez du moins.

Merci d'avance pour votre aide.

23/06/2010, 11h17
devyan

Bonjour,

Jette un oeil aux Sources JS il y a des chances que tu y trouves ton bonheur ;)
23/06/2010, 13h21
bricecol

Merci mais j'ai fais une recherche et je n'ai rien trouvé :?

Bonsoir.

J'ai construit un petit exemple. Je crois qu'il est très difficile d'appliquer un autre effet qu'un fading rapide sur ce genre de menu.

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
		ul.ulext {
			display:none;
			margin-left:12px;
		}
		ul.ulext li {
			width:100px;
			height:60px;
			padding:6px;
			background-color:lightGreen;
			border:1px dotted grey;
		}
		ul.ulext li ul.ulext {
			margin-left:99px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			$("ul.ulext:eq(0)").fadeIn("fast");
 
			$("ul.ulext li").hover(
				function(){
					$("ul.ulext:eq(0)", this).fadeIn("fast");
				},
				function(){
					$("ul.ulext:eq(0)", this).fadeOut("fast");
				}
			);
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<ul class="ulext">
		  <li>
			<a><span>Lien 1</span></a>
		  </li>
		  <li>
			<a><span>Lien 2</span></a>
			<ul class="ulext">
			  <li>
				<a><span>Lien 2.1</span></a>
			  </li>
			  <li>
				<a><span>Lien  2.2</span></a>
				<ul class="ulext">
				  <li>
					<a><span>Lien 2.2.1</span></a>
				  </li>
				  <li>
					<a><span>Lien  2.2.2</span></a>
				  </li>
				</ul>
			  </li>
			</ul>
		  </li>
		</ul>		
 
	</div>
</body>
</html>

29/06/2010, 15h27
bricecol

Je te remercie beaucoup. J'applique ta solution à mon site et je fais un retour si tout est ok. Merci encore !