Afficher/Cacher menu avec slideToggle

**Digilougm** · 24/10/2010, 18h10

Bonjour,

Débutant en jQuery, je viens de réaliser un menu déroulant animé grâce au tutoriel suivant : http://dmouronval.developpez.com/tut...ry/menu-anime/

Dans ce tutoriel, le menu se déroule lorsque l'évènement click de jquery est levé. A la place de cliquer, j'aimerais que celui-ci apparaisse au passage de la souris et se retire dès que la souris n'est plus au bon endroit. J'ai donc utilisé l'évènement hover, mais celui-ci me pose problème.
Le menu s'affiche bien lorsque le curseur de ma souris se trouve sur l'endroit spécifié. En revanche, dès que je souhaite accéder au menu déroulant, celui-ci se rétracte aussi tôt puisque mon curseur ne se trouve plus sur l'élément déclencheur.

Voici mon code :

Code :

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

1
2
3
4
5
 
$(document).ready(function () {
   $('a.menu_head').hover(function () {
	$('ul.menu_body').slideToggle('medium');
});

Code :

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

1
2
3
4
5
6
 
<a class="menu_head" href="url">Blabla</a>
 
<ul class="menu_body">
     <!-- ma liste d'éléments -->
</ul>

Pour récapituler, je souhaite que mon menu se déroule lorsque le curseur de ma souris est sur "menu-head", mais qu'il ne se rétracte pas pour autant lorsque je suis dans "menu_body".

Merci par avance.

**danielhagnoul** · 24/10/2010, 21h04

Bonsoir

Si j'ai bien compris, 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
<!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:#dcdcdc; 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; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		li {list-style:none;}
		.menu_head{border:1px solid #998675;}
		.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
		.menu_body li{background:#493e3b;}
		.menu_body li.alt{background:#362f2d;}
		.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
		.menu_body li a:hover{padding:15px 10px; font-weight:bold;}
	</style>
</head>
<body>
	<h1>Q. &amp; R. Forum jQuery</h1>
	<div id="conteneur">
<div class="container"> 
	<img src="http://dmouronval.developpez.com/tutoriels/javascript/jquery/menu-anime/fichiers/images/navigate.png" width="184" height="32" class="menu_head" alt="" /> 
	<ul class="menu_body"> 
		<li><a href="#">Qui sommes-nous ?</a></li> 
		<li><a href="#">Portfolio</a></li> 
		<li><a href="#">Clients</a></li> 
		<li><a href="#">Blog</a></li> 
		<li><a href="#">Forums</a></li> 
		<li><a href="#">Gallerie</a></li> 
		<li><a href="#">Contact</a></li> 
	</ul> 
</div> 
	</div> 
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.3.min.js"></script>
	<script>
		$(function(){
$("ul.menu_body li:even").addClass("alt");
 
$('img.menu_head').click(function(){
	$('ul.menu_body').slideToggle('medium');
});
 
$('img.menu_head').mouseenter(function(){
	$('ul.menu_body').slideDown('medium');
});
 
$("ul.menu_body").mouseleave(function(){
	$(this).slideUp('medium');
});
 
$('ul.menu_body li a').hover(
	function(){
		$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
	},
	function () {
		$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
	}
);
		});
 	</script>
</body>  
</html>

**Digilougm** · 24/10/2010, 21h42

Parfait ! Merci.

Afficher/Cacher menu avec slideToggle

jQuery

Vue hybride

Discussions similaires

Partager

Partager