Slide Left, Slide Right on parent hover and keep inner content visible
<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="http://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">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><img src="http://img850.imageshack.us/img850/460/unled1xw.jpg" alt="enter image description here"></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>
