Menu tooltips avec un comportement bizarre: jQuery

Marsh Posté le 28-04-2011 à 13:40:31

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 :

//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-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(); });
});
$(".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?
voici l'url pour voir de quoi je parle: http://www.moroccan-arts.fr/test-menu.php

En vous remerciant par avance.

Message édité par redah75 le 28-04-2011 à 13:41:06

Reply

Marsh Posté le 28-04-2011 à 13:40:31

Reply

Marsh Posté le 28-04-2011 à 17:28:59

IL me semble que tu caches le menu des que tu sors de la case survolée, donc c'est normal.

Reply

Marsh Posté le 28-04-2011 à 17:32:40

une solution?? ou un meilleur code??

Reply

Marsh Posté le 28-04-2011 à 18:06:32

Ben enlève ça:

".mouseleave(function () {
$(this).stop().fadeTo(400, 0, function() { $(this).hide(); })"

Reply

Marsh Posté le 28-04-2011 à 18:32:18

ca ne change rien!

Reply

Marsh Posté le 28-04-2011 à 20:01:35

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

Code :

$("#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

Reply

Menu tooltips avec un comportement bizarre: jQuery

Sujets relatifs:

Leave a Replay