Menu tooltips avec un comportement bizarre

[redah75]

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.

[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 ?

[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

[redah75]

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

[SpaceFrog]

pourquoi pas toggleClass() ?

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

[redah75]

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

[SpaceFrog]

toggleClass eut permis de simplifier ce code...

[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