title: How can i make a div to slide in from right side to left?
body: <p>How can i make a div to slide in from right side to left using css and jQuery? but I can't use <a href="http://api.jquery.com/toggleclass/" rel="nofollow">toggleClass()</a> from jQuery because I want to make the div can be scrolled down when it come out and if I use toggleClass() the scrollbar disappear. <a href="http://bugs.jquery.com/ticket/12951" rel="nofollow">This is the bug that I get from toggleClass()</a>.</p>
  
  <p>Here my div code:</p>
  
  <pre><code>&lt;div id="menu-home" &gt;
    &lt;form&gt;
      &lt;input type="text" class="search rounded" id="input" placeholder="Search.." &gt;
    &lt;/form&gt;
    &lt;span class="categories"&gt;Categories&lt;/span&gt;
    &lt;ul&gt;
      &lt;li id="menu1"&gt;Menu&lt;/li&gt;
      &lt;li id="menu2"&gt;Menu&lt;/li&gt;
      &lt;li id="menu3"&gt;Menu&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the button to trigger menu</p>
  
  <pre><code>&lt;div class="btn-right button_search" style=""&gt;
    &lt;img src="img/search_icon.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And Here my css</p>
  
  <pre><code>#menu-home-search{
      width: 80%;
      height: 100%;
      right: 0;
      padding-top:50px;
      margin-left: auto;
      margin-right: 0;
      overflow: scroll;
      position: fixed; 
      background: #34a6db;
      z-index:1000;
  }
  </code></pre>