Menu tooltips avec un comportement bizarre

**redah75** · 25/04/2011, 11h58

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 :

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
//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.

**danielhagnoul** · 25/04/2011, 16h40

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 ?

**redah75** · 25/04/2011, 18h55

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

**redah75** · 26/04/2011, 23h11

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

Code :

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

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(); });
});