jquery pb menu deroulant

**boo64** · 19/06/2009, 09h39

étant novice en js je me suis mis à tester jquery et j'ai refait ce tuto:

http://dmouronval.developpez.com/tut...ry/menu-anime/

donc mon menu marche bien mais j'ai était obligé de faire une fonction jquery par item et je n'arrive pas à résoudre ça

voici le 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
<div id="menu_l">
				<h4 class="menu_head1"><img class="droite_menu" src="img/downsimple.png">Accés</h4>
				<ul class="menu_body1">
					<li><a href="#">National</a></li>
					<li><a href="#">UPR</a></li>
					<li><a href="#">NRA</a></li>
					<li><a href="#">DSLAM</a></li>
				</ul>
				<h4 class="menu_head2"><img class="droite_menu" src="img/downsimple.png">Trafic</h4>
				<ul class="menu_body2">
					<li><a href="#">National</a></li>
					<li><a href="#">UPR</a></li>
					<li><a href="#">NRA</a></li>
					<li><a href="#">DSLAM</a></li>
				</ul>
			</div>

et le js

Code :

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

1
2
3
4
5
6
7
8
9
		$(document).ready(function () {
			//$("ul.menu_body li:even").addClass("alt");  alternance couleur
			$('h4.menu_head1').click(function () {
				$('ul.menu_body1').slideToggle('medium');
			});
			$('h4.menu_head2').click(function () {
			$('ul.menu_body2').slideToggle('medium');
			});
		});

donc j'aimerais pouvoir identifier sur quel menu on clique et faire une seule fonction et ainsi une seule classe menu head

**danielhagnoul** · 19/06/2009, 11h34

Bonjour.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Animated Drop Down Menu with jQuery</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		#menuHead1, #menuHead2, #menuHead3 {
			margin-left:12px;
			margin-bottom:12px;
			display:block;
		}
	</style>
	<script type="text/javascript" src="jsfiles/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		function fqqchose(jqueryObject){
			console.log("Ouverture ou fermeture du menu " + jqueryObject[0].id);
		}
 
		$(document).ready(function () {
			$("ul.menu_body li:even").addClass("alt");
 
			$('ul.menu_body li a').mouseover(function () {
				$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
			});
 
			$('ul.menu_body li a').mouseout(function () {
				$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
			});
 
			$('img.menu_head').click(function(){
				var obj = $(this).parent();
 
				obj.find('ul.menu_body').slideToggle('medium');
 
				fqqchose(obj);
			});
 
		});
	</script>
</head>
<body>
	<div class="container">
 
		<span id="menuHead1">
			<img src="images/navigate.png" width="184" height="32" class="menu_head" />
			<ul class="menu_body">
				<li><a href="#">About Us</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Clients</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Support Forums</a></li>
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</span>
 
		<br />
 
		<span id="menuHead2">
			<img src="images/navigate.png" width="184" height="32" class="menu_head" />
			<ul class="menu_body">
				<li><a href="#">About Us</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Clients</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Support Forums</a></li>
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</span>
 
		<br />
 
		<span id="menuHead3">
			<img src="images/navigate.png" width="184" height="32" class="menu_head" />
			<ul class="menu_body">
				<li><a href="#">About Us</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Clients</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Support Forums</a></li>
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</span>
 
	</div>	
</body>
</html>

jquery pb menu deroulant

jQuery

Vue hybride

Discussions similaires

Partager

Partager