I have a mockup of a menu system I'm putting in place: http://djinnius.com/GFTest/gftest.html (there is also a bin here: http://jsbin.com/orejup/2/edit but the text displayed in the green div doesn't work properly) The menu slides out when the little arrow in the upper LH corner is clicked on. I provide a full preview of the menu item in the green div when the menu item is hovered over by the mouse.
I would like the menu to elegantly slide in/out of sight like this: http://jsbin.com/itogor/5
The thing that is special with the above behavior is that if I don't use the positioning and overflow properties as demonstrated in the jsbin, the menu text squishes down as the menu is closed. This is unsightly and distracting.
I thought I had the above effect working properly but I ran into a problem that seems to indicate otherwise. I want to change the contents of the green div based on the selection of the slideout menu. However, when you scroll down to the lower items of the menu and click on an item, the contents of the green div are incorrect. It appears that the sliding menu is squeezing the text down and causing a mouseenter and mouseleave event to take place after the click event. This changes the content of the green div to be incorrect.
Any thoughts on how to prevent this behavior? I attempted to write a bin (http://jsbin.com/orejup/2/edit) but for some reason the green div text isn't changing. You can still see the undesired effect by examining the console and seeing the mouseenter/mouseleave events occurring after the click event.
