javascript - Set hover area to close subnav -
how can set mouseout area of screen either between main (red) links @ top, or outside of subnav (green), when user moves mouse outside of main nav, subnav close?
document.addeventlistener('domcontentloaded', function(){ var d = document; var navsub = d.queryselector('.nav-sub'); var navheader = d.queryselector('.nav-header'); function toggledrawer(state){ navheader.dataset.drawerdisplay = state; } //adding toggle state allows user close subnav clicking it, disables hover (now requires clicking) of main nav open subnav. messing mobile navigation. $(".nav-header").on('click',function(){ $(".nav-sub").slidetoggle("hide"); }); // header nav drawer function togglenav(){ var opener = d.queryselectorall('.opener'); [].foreach.call(opener, function(el, index) { el.addeventlistener('mouseenter', function(){ toggledrawer('show'); navheader.dataset.drawernum = index; }); el.addeventlistener('mouseout', function(){ navsub.addeventlistener('mouseenter', showdrawer('show')); navsub.addeventlistener('mouseout', toggledrawer('hide')); toggledrawer('hide'); navheader.dataset.drawernum = ""; }); }); } togglenav();
Comments
Post a Comment