Menu déroulant jQuery

tonymx227
Javascript

Bonjour à tous,

Voilà je voudrais réaliser un menu déroulant en jQuery, je rencontre quelques problèmes lors du focus sur le menu.

Je voudrais que le menu reste afficher lorsque la souris est sur celui-ci.

J'ai fais en sorte que lorsque on prends le mouseover() sur le li#outillages du menu, le menu s'affiche, lors du mouseout sur du li#outillage le menu se cache... Jusque là tout semble normal !

Seulement lors du mouseover sur le menu (div#megaDropDownMenu) c'est aussi le mouseout du li#outillages...

Donc le menu se cache, ça semble normal mais comment y remédier ?

<div id="megaDropDownMenu">Le contenue de mon menu déroulant en position absolue!</div>
<ul>
<li>Lien simple</li>
<li id="outillages">Menu deroulant</li>
<li>Lien simple</li>
</ul>

function showMenu(){
    $("div#megaDropDownMenu").css("display","block");
}
function hideMenu(){
    $("div#megaDropDownMenu").css("display","none");
}

function onMenu(){
    $("div#megaDropDownMenu").css("display","block");
}

$("li#outillages").bind("mouseover", showMenu);
$("div#megaDropDownMenu").bind("mouseover", onMenu);
$("li#outillages").bind("mouseout", hideMenu);

4 réponses

extrarox

Salut,

Normalement c'est pas comme ça qu'il faut faire,
dans ton li tu mets un autre ul, comme ça tu ne sors pas de ton li ;)

tonymx227
Auteur

Oui je sais mais là j'ai due utiliser un DIV, ca n'est pas possible donc ?

extrarox

bah c'est chaud quand même. Pourquoi la div, elle est plus loin dans la page?

tonymx227
Auteur

Je viens de trouver... Merci quand même...

function showMenu(){
        $("div#megaDropDownMenu").removeClass('displayNone');
    }
    function hideMenu(){
        $("div#megaDropDownMenu").addClass('displayNone');
    }
    function onMenu(){
        $("div#megaDropDownMenu").removeClass('displayNone');
    }
    $("li#outillages").bind("mouseover", showMenu);
    $("li#outillages").bind("mouseout", hideMenu);
    $("div#megaDropDownMenu").bind("mouseover", onMenu);
    $("div#megaDropDownMenu").bind("mouseout", hideMenu);