title: How to toggle a slide menu from the left with jQuery?
body: <p>For a mobile page to be used on iPhones etc. I am trying to create a menu which will slide in from the left and push the current content out to the right much like in phone apps. With a touch anywhere in the displayed menu (other than a link) the menu should disappear again and the page should be displayed again as before.</p>
  
  <p>I use the <a href="http://aozora.github.io/bootplus/index.html" rel="nofollow">http://aozora.github.io/bootplus/index.html</a> Bootplus CSS to have a decent look of the site and make it also responsive.</p>
  
  <p>I was able to get the slide in effect going nicely using the following jQuery code:</p>
  
  <pre><code>$('#leftmenu').hide();
  $('#button').on('click',function(){
    $('#content').css({'position':'fixed'}).animate({"left":"85%"});
    $('#leftmenu').css({'position':'fixed', 'width':'85%'});
    $('#leftmenu').fadeIn('slow');
  });
  </code></pre>
  
  <p>For the menu, I have the following html.</p>
  
  <pre><code>&lt;div id="leftmenu" class="container" style="width: 85%; left:0%; height: 100%; background-color:silver"&gt;
     &lt;br /&gt;
     &lt;p&gt;&lt;h3&gt;Quick links&lt;/h3&gt;&lt;/p&gt;
     &lt;p&gt;&lt;h4&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/h4&gt;&lt;/p&gt;
     &lt;p&gt;&lt;h4&gt;&lt;a href=""&gt;Page 1&lt;/a&gt;&lt;/h4&gt;&lt;/p&gt;
     &lt;p&gt;&lt;h4&gt;&lt;a href=""&gt;Page 2&lt;/a&gt;&lt;/h4&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="navbar .navbar-inverse" style="background-color:silver; vertical-align:middle"&gt;
    &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;
      &lt;i id="button" class="fa fa-bars"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when I hide the menu with the code below, the page no longer shows centered in the middle, but aligned to the left with no left margin anymore. </p>
  
  <pre><code>$('#leftmenu').on('click',function(){
    $('#content').css({'position':'absolute'}).animate({"left":"0%"});
    $('#leftmenu').fadeOut('slow');
    $('#content').fadeIn('slow');
  });
  </code></pre>
  
  <p>I understand that I do that with the css code, but I struggle to make it work with a toggle mechanism with which I can get back to the previous css settings without having to redefine all from scratch.</p>
  
  <p>Another issue I face is that whenever I touch the menu on the left, I need to touch twice to make it disappear. To show the menu, it works with a single touch on the Menu button, yet the hiding requires two touches.</p>
  
  <p>Thanks a million for your help.</p>