title: Slide Left, Slide Right on parent hover and keep inner content visible
body: <p>I am trying to create a menu system that slides left on mouseover (or hover) of parent element and slides right on mouseout - but that also ensures that the element that slides out is accessible as it will contain a menu of options for the user.</p>
  
  <p>My html is;</p>
  
  <pre><code>&lt;div id="sidebarDiv"&gt;
  
    &lt;div id="slidemenuDiv"&gt;
  
      cont here must be accessible
  
    &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>I've found somewhat of a solution in this thread: <a href="https://stackoverflow.com/questions/4485669/jquery-hoverintent-plugin-show-hide-div-on-parent-hover-but-keep-showing-when">HERE</a> but this is for a slide up and slide down scenario. Also I noticed that the animation was a little buggy - after several mouseover/mouseout events the inner div elements height would change and you would need to refresh the page to reset it. </p>
  
  <p>I have been also trying to adapt code found at: <a href="http://docs.jquery.com/UI/Effects/Slide" rel="nofollow noreferrer">http://docs.jquery.com/UI/Effects/Slide</a> without much luck.</p>
  
  <p>Any suggestions of where I might look? Or how to adapt the following code to work in a slide left and slide right fashion;</p>
  
  <pre><code>    $("#slidemenuDiv").hide();
  $('#sidebarDiv').hoverIntent(function () {
  
     $("#slidemenuDiv").stop().slideDown('slow');
  
  },
  function () {
     // I don't want the div to hide if user hovers over it
     $("#slidemenuDiv").stop().fadeOut('slow');
  });
  </code></pre>
  
  <p>Here is an example image that might explain what I am trying to achieve better;</p>
  
  <p><a href="http://img850.imageshack.us/img850/460/unled1xw.jpg" rel="nofollow noreferrer">http://img850.imageshack.us/img850/460/unled1xw.jpg</a></p>
  
  <p>Thank you
  W</p>
  
  <h1><strong>UPDATE:</strong></h1>
  
  <p>I managed to get the following to work;</p>
  
  <pre><code>$("#slidemenuDiv").stop().hide();
  $("#sidebarDiv").hoverIntent(
          function () {
             $("#slidemenuDiv").stop().show("slide", { direction: "right" }, 1000);
          },
          function () {
             $("#slidemenuDiv").stop().hide("slide", { direction: "right" }, 1000);
          }
  );
  </code></pre>
  
  <p>But the caveat being I have to include the following; </p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Seems like a heck of a lot just for a simple slideLeft, slideRight scenario? </p>