Dennis Dennis - 5 months ago 17
jQuery Question

slide div left by #px when mouseleave

I'm trying to have a menu div slide 200px left when I mouse out.

I have the following HTML structure:

<nav id="menuLeft">
<div id="menuLeft-toggle">
</div>
<div class="panel">
accordion menu in here
</div>
<div class="panel">
accordion menu in here
</div>

<div class="panel">
accordion menu in here
</div>
</nav>


I have a toggle div and few menu panels (it's for eLearning).

The layout is as follows:


  • The nav div is on the left side of the screen and is 200px wide by
    100% high

  • The menuLeft-toggle div runs down the right side of the
    menuLeft nav div

  • The panel divs stack vertically within the menuLeft div



I am already using JS (hasClass and removeClass) to toggle the nav div open and closed manually when clicking the menuLeft-toggle div but need to auto-hide (slide) the nav div on mouse out by 200px to the left so we don't hide the toggle div.

How can I accomplish having the div slide (i.e. .hide(400) ) by only 200px AND still have it able to open when the menuLeft-toggle div is clicked?

Your help is appreciated.

Answer

Not sure if this is quite what you're looking for, but using the :hover pseudo class could be used to trigger hiding the menu.

The menu would default to 'hidden' - (off the screen). Applying the :hover class zeroes out the left property of the element.

https://jsfiddle.net/fhfe1gey/