Side menu hover close delay issue

Question

I am new to javascript/jQuery. I am trying to create a side menu (slideout drawer). I have everything working properly, however when I close the drawer, the "tab" section with the close button does not close with the rest of the drawer as it continues to hover and stay open.

I am using CSS (Bootstrap) to format the entire slideout. I can get this to work fine with just hovering it open then close when mouse out of the slideout (you can uncomment the first set of js to see how it works with just the hover effect, this works smoothly and is how I need it to work with the close button), however I need it to remain open so users can look through the menu, so to close it, I added a close button image that they need to click to close.

I setup a jsfiddle so you can see exactly the issue when you click to close the slideout. Below is my code. Any help would be appreciated. Here is the jsfiddle link: https://jsfiddle.net/wtLge8te/2/

 // add/remove hover class on hover /*$("#slideoutNav").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });*/ // add hover class on mouseenter $("#slideoutNav").on("mouseenter", function() { slideoutHover(); }); function slideoutHover() { var slideout = $("#slideoutNav"); // unbind mouseenter for slideout $(slideout).off("mouseenter"); // start slideout open animation $(slideout).addClass("hover"); // clicking X button will close slideout $(slideout).find("a#slideoutBtn").on("click", function() { // turn off click binding $(this).off("click"); // remove slideout $(slideout).removeClass("hover"); // wait 1.5 seconds before activating hover again so it can slide back in without interuption window.setTimeout(function() { // setup mouseenter binding again $(slideout).on("mouseenter", function() { slideoutHover(); }); }, 1500); }); } 

 /* =========================== --- slideout drawer navigation ============================ */ #slideoutNav { position: fixed; top: 85px; left: 0; width: 35px; height: 75px; /*padding: 12px 0;*/ text-align: center; background: #568388; background-repeat: no-repeat; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; z-index: 999; } #slideoutNav a#slideoutBtn { background: url("http://techtalk.pcpitstop.com/wp-content/uploads/menuClose.png") no-repeat scroll; height: 75px; display: block; } #slideout_innerNav { position: fixed; top: 85px; left: -285px; background: #568388; width: 285px; padding: 25px 25px 10px 25px; height: auto; color: #fff; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; text-align: left; -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; z-index: 999; } #slideout_innerNav h2 { color: #fff; margin-bottom: 5px; margin-top: -10px; } #slideout_innerNav p { font-size: 16px; } #slideout_innerNav textarea { width: 190px; height: 100px; margin-bottom: 6px; } /* #slideoutSupport:hover { left: 305px; } #slideoutSupport:hover #slideout_innerSuppport { left: 0; } */ #slideoutNav:hover, #slideoutNav.hover { left: 285px; } #slideoutNav.hover { left: 285px; } #slideoutNav.hover a#slideoutBtn { background-image: url("http://techtalk.pcpitstop.com/wp-content/uploads/menuOpen.png"); } #slideoutNav.hover #slideout_innerNav { left: 0; } * { padding: 0; margin: 0; } body { font: 16px/1 sans-serif } /*VERTICAL MENU*/ nav.vertical { position: relative; background: #7bbab9; } /* ALL UL */ nav.vertical ul { list-style: none; } /* ALL LI */ nav.vertical li { position: relative; } /* ALL A */ nav.vertical a { display: block; color: #eee; text-decoration: none; padding: 10px 15px; transition: 0.2s; } /* ALL A HOVER */ nav.vertical li:hover>a { background: #98ad38; } /* INNER UL HIDE */ nav.vertical ul ul { background: rgba(0, 0, 0, 0.1); padding-left: 20px; transition: max-height 0.2s ease-out; max-height: 0; overflow: hidden; } /* INNER UL SHOW */ nav.vertical li:hover>ul { max-height: 500px; transition: max-height 0.25s ease-in; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="slideoutNav"> <a href="javascript:;" id="slideoutBtn"></a> <div id="slideout_innerNav"> <h3>Quick Links</h3> <nav class="vertical"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Church +</a> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">What We Believe</a></li> <li><a href="#">Become a Member</a></li> <li><a href="#">Bible Studies</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li><a href="#">K-5 School +</a> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">Admissions</a></li> <li><a href="#">Classrooms</a></li> <li><a href="#">Tuition</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li><a href="#">Preschool +</a> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Lunch Menu &amp; news</a></li> <li><a href="#">Summer Care</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Tuition/Fees</a></li> </ul> </li> </ul> </nav> </div> </div> <!-- /#slideoutNav --> 

Answer 1

I made an update to your jsfiddle.

https://jsfiddle.net/wtLge8te/6/

But here is the major changes to your css.

#slideoutNav {
  position: fixed;
  top: 85px;
  left: -285px;
  height: auto;
  width: 285px;
  /*padding: 12px 0;*/
  text-align: center;
  background: #568388;
  background-repeat: no-repeat;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}
#slideoutNav a#slideoutBtn {
  background: #568388 url("http://techtalk.pcpitstop.com/wp-content/uploads/menuClose.png") no-repeat 0px 0px;
  width: 35px;
  height: 75px;
  display:block;
  position: absolute;
  right: -35px;
  top: 0px;
}
#slideout_innerNav {
  background: #568388;
  width: 285px;
  padding: 25px 25px 10px 25px;
  height: auto;
  color: #fff;
}

#slideoutNav.hover {
    left: 0px;
}

Answer 2

I looked at your general structure and came up with a more performant, lean way of doing this. You want to use position fixed on the menu along the left edge, then use translateX(-100%) to move the menu off screen. Then position the open/close link inside of it with absolute in the top/right and use translateX(100%) to push it outside the menu. Then just toggle a class on click of the open/close link that manipulates translateX() , hiding and showing the menu. Transitioning transform properties gets GPU acceleration and doesn't cause performance problems with the animation.

 var $menu = $('.menu'), $open = $(".open"); function setHover() { $menu.addClass('hover'); $open.text('close'); } $menu.not('.hover').on('mouseover', function() { setHover(); }); $open.on('click',function() { if ($menu.hasClass('hover')) { $(this).text('open'); $menu.off('mouseover').removeClass('hover').on('transitionend', function() { $(this).removeClass('hover'); $(this).on('mouseover', function() { setHover(); }).off('transitionend'); }); } else { setHover(); } }) 

 .menu { position: fixed; top: 0; left: 0; transform: translateX(-100%); transition: transform .25s; } .open { position: absolute; top: 0; right: 0; transform: translateX(100%); } .hover { transform: translateX(0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> sidemenu <a href="#" class="open">open</a> </div>