title: Simple jQuery left/right slide toggle animation for mobile menu
body: <p>I'm trying to create a menu that slides in and out from the right hand side of the screen for a mobile version of a site. </p>
  
  <p>I have a 'ul' that starts off screen on page load due to its large margin. The plan is to have a button that will toggle that margin back and forth with '.animate' in order to hide and reveal the 'ul'.</p>
  
  <p>The first chunk of code below works but won't repeat. So, on 'click', the menu appears, hides and then appears once more before it stops responding. This confused me so I tried a different route and went with an 'if' statement but now it just keeps sliding left despite the class definitely changing (i've checked it in the console). </p>
  
  <p>Now i'm stumped! Can anyone help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// MOBILE MENU
  $(function() {
   // create identical menu buttons with different classes 
   var $active = $("&lt;div class='mm-active'&gt;&lt;hr&gt;&lt;hr&gt;&lt;hr&gt;&lt;/div&gt;");
   var $inactive = $("&lt;div class='mm-inactive'&gt;&lt;hr&gt;&lt;hr&gt;&lt;hr&gt;&lt;/div&gt;");
    
   // append 'inactive' menu button to menu div
   $(".mobile-menu").prepend($inactive);
  
      $($inactive).click(function() {
       $($inactive).hide();
       $(this).next("ul").animate({'margin-left': '-='+90}, 1000);
       $(".mobile-menu").prepend($active);
   });
  
   $($active).click(function() {
    $(this).nextAll("ul").animate({'margin-left': '+='+90}, 1000);
    $($active).remove();
    $($inactive).show();
   });
  });
  
  //And here with the 'if' statement...
  
  $(function() {
   // create identical menu buttons with different classes 
   var $mm_btn = $("&lt;div&gt;&lt;hr&gt;&lt;hr&gt;&lt;hr&gt;&lt;/div&gt;");
   var $classname = ($mm_btn).attr("class");
  
   // append mobile menu button to menu div
   $(".mobile-menu").prepend($mm_btn);
  
   $($mm_btn).click(function() {
    $($mm_btn).toggleClass('active');
  
    if($classname === 'active') {
     $(this).next("ul").animate({'margin-left': '+='+90}, 1000);
    } else {
     $(this).next("ul").animate({'margin-left': '-='+90}, 1000);    
    }
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mobile-menu {
   position: absolute;
   top: 5px;
   right: 0;
   width: 25px;
   margin: 0 25px 0 0;
   padding: 5px 0 8px 5px;
   z-index: 1;
  }
  
  .mobile-menu hr {
   border: 0;
   height: 2px;
   background: black;
  }
  
  .mobile-menu ul {
   position: relative;
   z-index: -1;
   display: inline-block;
   text-align: right;
   margin-left: 50px;
   margin-top: -50px;
   padding: 50px 25px 5px 5px;
   list-style: none;
  }
  
  .mobile-menu ul li {
   padding: 3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mobile-menu"&gt;
   &lt;ul&gt;
    &lt;a href="projects.html"&gt;&lt;li class="projects"&gt;projects&lt;/li&gt;&lt;/a&gt;
    &lt;a href="about.html"&gt;&lt;li&gt;about&lt;/li&gt;&lt;/a&gt;
    &lt;a href="contact.html"&gt;&lt;li&gt;contact&lt;/li&gt;&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>