menu deroulant

**chacalbobo** · 24/01/2010, 19h56

Bonjour je rencontre un souçi a l'utilisation de jquery pour la conception d'un menu déroulant, il tourne en boucle, une foi ouvert, il s'ouvre, ferme et n'arrete pas. Je veux un mouseover qui deplie ma balise ul et montre les li, et un mouseout, toujours sur mon ul qui le replie. Je supose que c'est un probleme connu, mais je trouve pas ma solution sur le net! Tyte idée?
Dite moi si vous avez besoin du css, mais a priorie ca me semble pas nécessaire.

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
 
 
<ul class="menu">menu1
    <li> <a href="#">essai 1</a> </li>
    <li> <a href="#">essai 2</a> </li>
    <li> <a href="#">essai 3</a> </li>
    <li> <a href="#">essai 4</a> </li>
    <li> <a href="#">essai 5</a> </li>
    <li> <a href="#">essai 6</a> </li>
    <li> <a href="#">essai 7</a> </li>
    <li> <a href="#">essai 8</a> </li>
</ul>
<script>
	$(document).ready(
					  function(){$("ul.menu li").hide()}
					  );
 
	$("ul.menu").mouseover(function() {$("ul.menu li").slideToggle('slow');});
</script>

**danielhagnoul** · 25/01/2010, 00h36

Bonsoir.

Bien au contraire, les effets de slide sur un menu sont assez difficiles à contrôler et la feuille de style a une importance cruciale.

Voici un exemple :

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
 
		/* TEST */
		/* cette feuille de style est OK sous IE8, C2 et F3 */
 
		div#menu {
			position:absolute;
			top:12px;
			left:12px;
			width:200px;
			height:auto;
		}
		div.dropHolder {
			padding-bottom:12px;
		}
		div.dropdown-menu {
			padding:6px;
		}
		div.menu {
			height:30px;
			border:1px solid #000000;
			padding-top:12px;
			background-color:#000099;
			color:#FFFFFF;
			font-weight:bold;
			text-align:center;
		}
		ul.down-list {
			list-style-type:none;
			background-color:#FFFFCC;
			color:#FFFFFF;
			border:1px solid #000000;
			display:none;
		}
		ul.down-list li {
			padding-top:6px;
			padding-left:6px;
			padding-bottom:6px;
		}
	</style>
	<script src="../lib/jquery-1.4.min.js"></script>
	<script>
		$(function(){
 
			$('.dropdown-menu').hover(
				function(){
					var obj = $(this);
 
					obj.queue(function(){
						obj.find('.down-list').delay(800).stop(false, true).slideDown(800);
 
						obj.dequeue();
					});
				}, 
				function(){
					var obj = $(this);
 
					obj.queue(function(){
						obj.find('.down-list').delay(800).stop(false, true).slideUp(800);
 
						obj.dequeue();
					});
				}
			);
 
 		});
	</script>
</head>
<body>
 
	<div id="menu">
		<div class="dropHolder">
			<div class="dropdown-menu">
				<div class="menu">Menu 1</div>
				<ul id="menu-1" class="down-list">
					<li><a href="#">lien vers a du menu 1</a></li>
					<li><a href="#">lien vers b du menu 1</a></li>
					<li><a href="#">lien vers c du menu 1</a></li>
				</ul>
			</div>
		</div>
		<div class="dropHolder">
			<div class="dropdown-menu">
				<div class="menu">Menu 2</div>
				<ul id="menu-2" class="down-list">
					<li><a href="#">lien vers a du menu 2</a></li>
					<li><a href="#">lien vers b du menu 2</a></li>
					<li><a href="#">lien vers c du menu 2</a></li>
				</ul>
			</div>
		</div>
		<div class="dropHolder">
			<div class="dropdown-menu">
				<div class="menu">Menu 3</div>
				<ul id="menu-3" class="down-list">
					<li><a href="#">lien vers a du menu 3</a></li>
					<li><a href="#">lien vers b du menu 3</a></li>
					<li><a href="#">lien vers c du menu 3</a></li>
				</ul>
			</div>
		</div>
	</div> <!-- FIN #menu -->
 
</body>
</html>

menu deroulant

jQuery

Vue hybride

Discussions similaires

Partager

Partager