title: Issues in animated menu with single click button in javascript
body: <p>I have been created simple menu with single button from this link <a href="http://codepen.io/MrBambule/pen/jIseg" rel="nofollow">http://codepen.io/MrBambule/pen/jIseg</a></p>
  
  <p>Now i want to reduce the size of the button,</p>
  
  <p>So that i changed the code like this,</p>
  
  <pre><code>.button {
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid;
    border-radius: 50%;
    background: #2E3F47;
    z-index: 10;
  }
  
  .line {
      background: #ccc;
      width: 43px;
      height: 7px;
      margin: 5px auto;
  }
  
  .line__first {
      margin-top: 9px;
  }
  </code></pre>
  
  <p>index.js:</p>
  
  <pre><code>// function to trigger animation
  $('.button').click(function() {
  
    // check if the menu-items are hidden behind the button
    if ($('.menu__list').hasClass('hidden')) {
      // add class to make the menu-items drop down
      $('.item1').addClass('list--animation');
      // the following items trigger the animation after a certain delay
      $('.item2').addClass('list--animation--delay1');
      $('.item3').addClass('list--animation--delay2');
      // remove the hidden class from the ul container to show that the items are not hidden anymore
      $('.menu__list').removeClass('hidden');
    }
    else {
      // remove class to make the menu-items disappear
      $('.item1').removeClass('list--animation');
      $('.item2').removeClass('list--animation--delay1');
      $('.item3').removeClass('list--animation--delay2');
      // add the hidden class to the ul container to show that the items are now hidden again 
      $('.menu__list').addClass('hidden');
    }
  
  });
  </code></pre>
  
  <p>So the button size reduced, but when i click the button, it shows the lists are not properly.</p>
  
  <p>Can anybody help me, how to solve this one, thanks in advance.</p>