Friday, 15 August 2014

jquery - Hover Menu From Non-Child Div -



jquery - Hover Menu From Non-Child Div -

i have div need function hover menu. cannot create kid element (because of how i'm using in wordpress theme). li menu item triggers hover has id of #menu-item-183. div need appear #const-training-menu.

i have next code, works.

//hides div on page load $('#const-training-menu').hide(); //show menu div when li hovered $('#menu-item-183').hover(function () { $('#const-training-menu').show(); }, function () { $('#const-training-menu').hide(); }); //keeps menu div visible when menu div hovered $('#const-training-menu').hover(function () { $('#const-training-menu').show(); }, function () { $('#const-training-menu').hide(); });

however, functionality little buggy. have move li item visible div , time right maintain visible. i've tried adding settimeout hover hide seek allow time div, doesn't seem help or work. thoughts?

if you'd see in development, visit http://naspweb.com/ , hover on construction training / certifications menu option.

edit

i tried based on suggestions below, submenu still doesn't remain visible.

$(document).ready(function () { $('#const-training-menu').hide(); //initial hide var ishovered = false; $('#menu-item-183').hover(function () { $('#const-training-menu').show(); }, function () { if(ishovered)return; //allows other event handler override mouseout settimeout(function() { $('#const-training-menu').hide(); }, 1000); }); $('#const-training-menu').hover(function () { ishovered = true; $('#const-training-menu').show(); }, function () { ishovered = false; $('#const-training-menu').hide(); }); });

i seek setup kind of override flag mouseout portion of menu item event handler; this:

$(function(){ var ishovered = false; $('#menu-item-183').hover(function () { $('#const-training-menu').show(); }, function () { if(ishovered)return; //allows other event handler override mouseout $('#const-training-menu').hide(); }); $('#const-training-menu').hover(function () { ishovered = true; }, function () { ishovered = false; $('#const-training-menu').hide(); }); });

i haven't tested concern first mouse out trigger before flag set. timeout mention solve issue if occur.

jquery drop-down-menu

No comments:

Post a Comment