Menu tooltips avec un comportement bizarre

Version imprimable

Bonjour,

j'aimerais mettre en place un menu comme sur http://store.apple.com/fr (Aide, Votre compte, Voir panier) a l'aide de jquery mais j'ai un peu de mal.
voici en gros ce que j'ai fait:

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
//Code html
<ul id="menu">
    <li><a href="javascript:;" id="menu1">Menu 1</a></li>
    <li><a href="javascript:;" id="menu2">Menu 2</a></li>
    <li><a href="javascript:;" id="menu3">Menu 3</a></li>
</ul>
 
// contenu menu 1
<div id="tt-menu1" class="menu-sub-tt">
    <ul class="my-list">
        <li><a href="lien.html">Titre 1 menu 1</a></li>
        <li><a href="lien.html">Titre 2 menu 1</a></li>
        <li><a href="lien.html">Titre 3 menu 1</a></li>
    </ul>
</div>
 
// contenu menu 2
<div id="tt-menu2" class="menu-sub-tt">
    <ul class="my-list">
        <li><a href="lien.html">Titre 1 menu 2</a></li>
        <li><a href="lien.html">Titre 2 menu 2</a></li>
        <li><a href="lien.html">Titre 3 menu 2</a></li>
    </ul>
</div>
 
// contenu menu 3
<div id="tt-menu3" class="menu-sub-tt">
    <ul class="my-list">
        <li><a href="lien.html">Titre 1 menu 3</a></li>
        <li><a href="lien.html">Titre 2 menu 3</a></li>
        <li><a href="lien.html">Titre 3 menu 3</a></li>
    </ul>
</div>
 
// Code jquery
$("#menu a").mouseenter(function () {
	$(this).addClass("menu-sub-active");
	$("#tt-" + $(this).attr('id')).stop().fadeTo(300, 1);
}).mouseleave(function () {
	$(this).removeClass("menu-sub-active");
	$("#tt-" + $(this).attr('id')).stop().fadeTo(400, 0, function() { $("#tt-" + $(this).attr('id')).hide(); });
});
 
$(".menu-sub-tt").mouseenter(function () {
	$(this).stop().show();
}).mouseleave(function () {
	$(this).stop().fadeTo(400, 0, function() { $(this).hide(); });
});

je ne mets pas les css car tout est bien affiché.
Lorsque je survole le menu, tout marche bien, mais le probleme est quand je deplace la curseur sur le contenu du menu (#tt-menu1, #tt-menu2 et #tt-menu3) que j'ai un comportement bizarre. sauriez vous ce qui ne va pas? o auriez vous une maniere meilleur et plus propre de le faire?

En vous remerciant par avance.

25/04/2011, 16h40
danielhagnoul

Bonjour

En général, sans la totalité du code (même s'il est réputé irréprochable) ou un lien vers la page il m'est impossible de faire un test et de me rendre compte du problème et donc de répondre à la question.

Dans votre cas, en voyant votre script, je pense que vous tombez dans le cas type décrit dans la FAQ jQuery : Pourquoi ma fonction hover() provoque-t-elle un va-et-vient ?
25/04/2011, 18h55
redah75

Bonjour Daniel et merci pour votre reponse.
pour faire simple, voici le lien vers une page contenant le menu dont je parle:
http://www.moroccan-arts.fr/test-menu.php

Merci encore une fois

Bonsoir,
Juste pour info, j'ai un peu modifié le code et j'ai mis ceci pour le menu:
Code:

1 2 3 4 5 6 7 $("#menu-sub a").hover(function() { $(this).addClass("menu-sub-active"); $("#tt-" + $(this).attr('id')).stop(true).fadeTo(300, 1); }, function() { $(this).removeClass("menu-sub-active"); $("#tt-" + $(this).attr('id')).stop(true).fadeTo(300, 0, function() { $("#tt-" + $(this).attr('id')).hide(); }); });
ca l'air de marcher mieux mais j'ai par contre toujours le problem lorsque je survole le contenu du menu deroulant!!
une idee??
Merci

27/04/2011, 08h15
SpaceFrog

pourquoi pas toggleClass() ?
27/04/2011, 13h43
redah75

au fait le probleme majeur n'est pas la class css mais plutot le jquery que je n'arrive pas a mettre en place pour le menu...

j'ai finalement pu resoudre le probleme, et voici le code jQuery si quelqu'un se trouve dans le meme cas:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#menu-sub a").hover(function() {
		$(this).addClass("menu-sub-active");
		$("#tt-" + $(this).attr('id')).stop(true).fadeTo(300, 1);
	}, function() {
		$(this).removeClass("menu-sub-active");
		$("#tt-" + $(this).attr('id')).stop(true).fadeTo(200, 0, function() { $(this).hide(); });
	});
 
	$(".menu-sub-tt").hover(function() {
		var link_active = $(this).attr('id').substr(3);
		$("#menu-sub a#" + link_active).addClass("menu-sub-active");
		$(this).stop(true).show().fadeTo(300, 1);
	}, function() {
		$("#menu-sub a").removeClass("menu-sub-active");
		$(this).stop(true).fadeTo(200, 0, function() { $(this).hide(); });
	});

MErci en tout cas

29/04/2011, 08h47
SpaceFrog

toggleClass eut permis de simplifier ce code...
30/04/2011, 04h24
redah75

ummm, c'est vraiment pas la joie, le code jquery que j'ai soumis bug dans certains cas...
j'espere avoir des reponses avec des propositions de code meilleurs.

Merci