Menu tooltips avec un comportement bizarre: jQuery

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Menu tooltips avec un comportement bizarre: jQuery

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 :

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

Publicité

gelatine_velue

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

redah75

une solution?? ou un meilleur code??

gelatine_velue

Ben enlève ça:

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

redah75

ca ne change rien!

redah75

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

FORUM HardWare.fr

Programmation

HTML/CSS

Menu tooltips avec un comportement bizarre: jQuery

Sujets relatifs
logo header et menu	menu déroulant
[Pb] Affichage d'un menu avec un effet carrousel	Menu positionnement différent sur IE et Firefox + Problème de bordure
comportement étrange de BIGNUM	Modification/amélioration menu contextuel gtk (C++?)
Menu Wamp	[JAVA] Menu lié à une animation
Menu Dynamique recursif php/mysql	JSF Tomahawk menu
Plus de sujets relatifs à : Menu tooltips avec un comportement bizarre: jQuery

Page générée en 0.056 secondes