bonjour à tous.

voilà je suis en train de faire un menu à l'aide de jquery. Quand je passe ma sourie sur le lien, un sous menu s'affiche. Jusque là, pas de problèmes, ça fonctionne très bien.

voici mon code :

partie html (un élément de mon menu ainsi que le sous menu qui s'y rattache):

<li>
           <a onmouseover="menuVisible(this)" onMouseOut="menuInvisible(this)" href="#">A voir</a>
           <div class="invisible sousmenu">
            
                <li><a href="#">Catégorie</a></li>
                <li><a href="#">Sous-catégorie</a></li>
                <li><a href="#">Objets</a></li>
            
            </div>
        </li>

partie jquery :

function menuVisible(elem)
{
  $(elem).next().fadeIn("slow");
}

function menuInvisible(elem)
{
   $(elem).next().fadeOut("slow");
}

mais voilà quand je descend pour aller cliquer sur le sous menu, celui ci ce rétracte, et c'est normal, vue la façon dont j'ai écrit mon code .
Et j'aurai voulu savoir comment empêcher cela, histoire que je puisse cliquer sur les éléments de mon sous menu (en gros comment bloquer l'event onMouseOut si je vais sur le sous menu).


Merci d'avance

IceWind

Tu peut tout simplement fonctionner avec un petit temps de retard : on fait disparaître le menu au bout de 25ms si la souris n'est pas allé sur le menu.
Au passage, comme tu utilise jQuery, autant utiliser toute sa puissance et ne pas mélanger html et javascript :

<li>
           <a href="#" class="menu">A voir</a>
           <div class="invisible sousmenu">
            
                <li><a href="#">Catégorie</a></li>
                <li><a href="#">Sous-catégorie</a></li>
                <li><a href="#">Objets</a></li>
            
            </div>
        </li>

$(function(){ // on attend que le DOM soit chargé
    var timer;
    $('.menu').hover(function(){
        $(this).next().fadeIn('slow');
    }, function(){
        timer = setTimeout(function(){
            $(this).next().fadeOut('slow');
        }, 25);
    });
    $('.sousmenu').mousein(function(){
        clearTimeout(timer);
    });
});

mousein ?

EDIT : Et je crains que le $(this) du setTimeout ne référence pas ce que tu voulais... =°

Oups, en effet, j'ai fait quelques erreurs :

$(function(){ // on attend que le DOM soit chargé
    var timer;
    $('.menu').hover(function(){
        $(this).next().fadeIn('slow');
    }, function(){
        timer = setTimeout(function(e){
            $(e.target).next().fadeOut('slow');
        }, 25);
    });
    $('.sousmenu').mouseover(function(){
        clearTimeout(timer);
    });
});

Par contre là, ton e est undefined, non ?...

J'aurais plutôt fait comme ça :

}, function() {
    var that = this;
    timer = setTimeout(function(){
        $(that).next().fadeOut('slow');
    }, 25);
});

Egalement, un clearTimeout() du timer serait le bienvenu juste avant le setTimeout(), afin d'éviter l'accumulation de timeouts et de faire une protection anti-boulay

Enfin il faudra sans doute un mouseout sur le '.sousmenu' pour qu'il puisse se refermer
(Le timer pourra être réutilisé également à ce moment là, dans le cas où le curseur revient sur le lien )


EDIT : Ah, et à voir si mouseenter et mouseout ne seraient pas plus adaptés... On a eu des cas de mouseover/mouseout qui bug dans ce genre de cas

Ah, oui, je me suis trompé de fonction pour le e. C'est sur la deuxième fonction du hover qu'il devrait être. Il est aussi vrai que j'ai pas du tout pensé à faire disparaître le sous-menu quand on le quitte.

Je crois que je vais mettre ces erreurs sur le compte de la fatigue et je vais aller me coucher de ce pas.

un grand merci, tout vos postes m'ont beaucoup aider.

voilà mon code jquery, si quelqu'un a un jour le même problème :

$(function(){ // on attend que le DOM soit chargé
    var timer;
    $('.menu').hover(function(){
        $(this).next().fadeIn('fast'); //comme ça pas de risque pour celui qui vas trop vite
   }, function() {
        var that = this;
        timer = setTimeout(function(){
            $(that).next().fadeOut('fast');
        }, 100);
    });

    $('.sousmenu').mouseenter(function(){
        clearTimeout(timer);
    });

    $('.sousmenu').mouseleave(function(){
        var that = this;
        timer = setTimeout(function(){
            $(that).fadeOut('fast');
        }, 100);
    });
});

Maintenant que j'y pense, le mouseenter et mouseleave peuvent être remplacés par un hover()

Ca uniformisera le code

Bonne continuation.