/ / Rozbaľovacia navigačná ponuka založená na dopyte - javascript, jQuery, rozbaľovacie menu, navigácia

Jquery založená rozbaľovacia navigačná ponuka - javascript, jquery, drop-down-menu, navigácia

Snažím sa vytvárať animované (sotva) rozbaľovacie ponuky. Súbory JS sú k dispozícii, ak sa pozriete na zdroj mojej stránky. Mám to v podstate funkčné.

Moja otázka je: Keď prejdem kurzorom na niečo z hlavnej ponuky a potom prejdem priamo do podponuky, ktorá sa objaví (nadol), ak potom prejdem kurzorom na niečo v tomto menu a nechám to, zostane.

http://lmiah.site11.com/slide%20down%20box%20menu%20new/mainTest.html

Aby som bol menej mätúci, uvediem priamy príklad:

Ak umiestnite kurzor myši nad „Kariéra“, choďte rovnonadol a nadol a podržte kurzor nad „Zamestnanecké posudky“, potom úplne presuňte myš z ponuky nadol, ponuka zostane, kým sa znova nadvihnete nad „Kariéra“.

Akákoľvek pomoc by bola ocenená!

EDIT: Zistil som, že to má niečo spoločné s a href="# class="subMenuFloat" Kedykoľvek umiestnim kurzor na tieto odkazy (sú totie v skrytom rozbaľovacom zozname), môj rozbaľovací člen div zostáva. Nemôžem nájsť dôvod, prečo sa to stane, ale ak sa jednoducho nadvihnem nad li a vynechám odkaz, správne vystúpi.

odpovede:

0 pre odpoveď č. 1

demo: http://jsbin.com/welcome/13456

príklad bez použitia doplnku menu je to len dôkaz koncepcie

$(function() {
var flag = false;
$("#mainMenu li.mainMenuItems").hover(function() {
if (!flag)
$(this).find(".submenu").slideDown(500);

}, function() {
if (!flag)
$(this).find(".submenu").slideUp(500);
});

$("#mainMenu li.mainMenuItems .submenu").hover(function() {
flag = true;
}, function() {
$(this).slideUp(500);
flag = false;
});
});

0 pre odpoveď č. 2

Toto je bežný problém pri používaní vznášania safungujú v jQuery, pretože práve používaný selektor sa v skutočnosti pohybuje z jedného prvku na druhý. Tu je spôsob, ako som to urobil, v podstate ste nastavili div alebo li vo vnútri lišty svojho menu. Príklad:

<ul class="menu-hover">
<li class="menu one">Menu Option One
<div> Here is the drop down menu</div>
</li>
<li class="menu two">Menu Option One
<div> Here is the drop down menu</div>
</li>
</ul>

jQuery by boli

V podstate to hovorí, keď sa vznášate nadAk v ponuke skryjete všetky časti div v tomto menu, ktoré by boli všetkými ponukami vo vašom rozbaľovacom zozname, potom zobrazte div, ktorý sa nachádza pod kurzorom myši. Budete musieť urobiť lí pozíciu relatívnu a div absolútnu. Teoreticky je teda div pod obsahom li, a preto keď sa vznášate, zostane otvorený.

$(".menu-hover li").hover(function(){

//Hide each div on hover
$(".menu div").each(function(){
$(this).hide();
});

$("div", this).show();
});