ul déroulable simple

**bricecol** · 23/06/2010, 11h08

Bonjour tout le monde.

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

Code :

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

1
2
3
4
5
6
7
8
9
10
<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></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.

**devyan** · 23/06/2010, 11h17

Bonjour,

Jette un oeil aux Sources JS il y a des chances que tu y trouves ton bonheur

**bricecol** · 23/06/2010, 13h21

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

**danielhagnoul** · 29/06/2010, 00h04

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 :

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
<!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>

**bricecol** · 29/06/2010, 15h27

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

ul déroulable simple

jQuery

Discussions similaires

Partager

Partager