title: jQuery sliding drawer menu is blocking other content
body: <p><strong>My Working Menu (with a minor problem)...</strong></p>
  
  <p>I have a sliding drawer menu system I've been using successfully for quite a while.  It uses rollover images and this working <a href="http://jsfiddle.net/PayFw/143/" rel="nofollow">jsFiddle (#1)</a> below nicely demonstrates just the relevant operation with static <code>div</code>'s in place of the image rollovers.</p>
  
  <p>My system uses container <code>div</code>'s with <code>overflow:hidden;</code> and drawer <code>div</code>'s inside each.  When a jQuery animation slides the drawer outside the container it's automatically hidden.  Various other techniques are used to stop the animation when you move your mouse from the drawer back to the menu in order to prevent the drawer from closing prematurely.</p>
  
  <p>Lots of time and effort was put into this system thanks to the help of the SO community.  It served me well but now the menu drawers contain a lot more content.  The larger/longer drawers have revealed this new issue as I'll describe below.</p>
  
  <p>Just for demonstration purposes, I've outlined the containers to show their positions and slowed the animation.  The final project is faster and does not have these outlines.</p>
  
  <p><a href="http://jsfiddle.net/PayFw/143/" rel="nofollow">#1 - http://jsfiddle.net/PayFw/143/</a></p>
  
  <p>As you can see, when content (a link for example) requiring interaction is behind or partially blocked by these containers, the link is not clickable as it's being covered.  This problem can be seen in Mozilla and Webkit but not IE-8.  (In this case, I think IE it not working as expected.)  I have not tested other versions.</p>
  
  <p>Playing with z-index is not a solution because that only causes the drawers to slide behind the content.  Obviously, I want the drawers to slide over the content while in use.</p>
  
  <hr>
  
  <p><strong>What I've been trying...</strong></p>
  
  <p>Various solutions to the small issue above only seems to lead to more complicated issues.</p>
  
  <p>I thought this one would be simple... just change make the containers invisible with <code>visibility:hidden;</code>.  Then when you hover to invoke the sliding drawer, change to <code>visibility:visible;</code> and back to <code>visibility:hidden;</code> after the drawer closes.  Even with the added complication of the animation, this is done with a callback to allow the closing animation to complete before making the container invisible again.</p>
  
  <p>It's working very good when you enter the menu item "cleanly" ("cleanly" defined: from the top/bottom while not touching adjacent menu items).</p>
  
  <p>However, this solution has created a whole new problem.  When you move from one menu item to another, the jQuery animation <code>stop()</code> interferes with the opening of the next menu and slams it shut while you're still hovering it.  And it's making the callback function unreliable.... sometimes, as you can see via the gray outline, leaves the container visible, defeating the whole purpose of this solution.</p>
  
  <p><a href="http://jsfiddle.net/PayFw/144/" rel="nofollow">#2 - http://jsfiddle.net/PayFw/144/</a></p>
  
  <hr>
  
  <p><strong>Questions:</strong></p>
  
  <ol>
  <li><p>Is there another way to prevent <a href="http://jsfiddle.net/PayFw/143/" rel="nofollow">system #1</a> from always blocking content even when the drawers are closed?</p></li>
  <li><p>If not, is there a way to fix the problems with <a href="http://jsfiddle.net/PayFw/144/" rel="nofollow">version #2</a>?  i.e. - get the container's visibility to properly toggle with the drawer animation while maintaining the same clean/reliable operation as in <a href="http://jsfiddle.net/PayFw/143/" rel="nofollow">version #1</a>.</p></li>
  <li><p>If there is no simple or practical solution, is there a jQuery plugin that can be easily integrated with my system?  If so, which one and how?  I know there are tons of jQuery menu drawer systems but I need something that can just put customizable sliding drawers under my <em>already existing</em> image rollovers (while not blocking the click-ability of any content that might fall into the drawers' zone of operation).</p></li>
  </ol>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Regarding answer posted by <strong>vzwick</strong>:  His solution is simple and brilliant but it needs further explanation.  His statement about using <code>display:none;</code> &amp; <code>display:block;</code> in place of <code>visibility:hidden;</code> &amp; <code>visibility:visible;</code> is only part of the story.</p>
  
  <p>I was using <code>visibility:hidden;</code> on the <strong>containers</strong>.</p>
  
  <p>Instead, I should have been using <code>display:none;</code> on the <strong>drawers</strong>.</p>
  
  <p>Why?</p>
  
  <p>By toggling <code>visibility:hidden;</code>, the <strong>container</strong> stays within the content flow.  The containers are within the flow and have an automatic size that is determined by the drawer size.</p>
  
  <p>By toggling <code>display:none;</code>, the <strong>drawer</strong> is removed from the content flow.  By removing the drawer from the flow, its container becomes zero size.  So although the containers are still in the content flow, they are collapsed, zero size, no longer interfering with the page's content and therefore no longer a need to make them invisible.</p>
  
  <p><a href="http://jsfiddle.net/PayFw/146/" rel="nofollow">http://jsfiddle.net/PayFw/146/</a></p>
  
  <p>Brilliant.   Thanks to <strong>vzwick</strong>.</p>