Issues in animated menu with single click button in javascript

Question

I have been created simple menu with single button from this link http://codepen.io/MrBambule/pen/jIseg

Now i want to reduce the size of the button,

So that i changed the code like this,

.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;
}

index.js:

// 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');
  }

});

So the button size reduced, but when i click the button, it shows the lists are not properly.

Can anybody help me, how to solve this one, thanks in advance.

Answer 1

Change your CSS as below.

Workin JSFIDDLE Here

• CSS

.button { position: relative; width: 50px; height: 50px; border: 1px solid; border-radius: 50%; background: #2E3F47; z-index: 10; }

    .line {
      background: #ccc;
      width: 15px;
      height: 5px;
      margin: 2px auto;
    }

    .line__first {
      margin-top: 15px;
    }    
    .menu {
      z-index: 1;
      float: left;
      width: 100%;
    }

    .menu__list {          
      width: 100%;
      margin-left:-110px;
        margin-top:-10px;
    }        
    /* Animation keyframes for the drop down */
    @keyframes drop {
      from {
        top: 0px;
      }
      70% {
        top: 85px;
        animation-timing-function: ease-in;
      }
      to {
        top: 70px;
        animation-timing-function: ease-out;
      }
    }
    @-webkit-keyframes drop {
      from {
        top: 0px;
      }
      70% {
        top: 85px;
        -webkit-animation-timing-function: ease-in;
      }
      to {
        top: 70px;
        -webkit-animation-timing-function: ease-out;
      }
    }        
    li {
      position: relative;
      list-style: none;
      padding-bottom: 0px;
      top: 0px;
    }        
    li a {
      text-decoration: none;
      color: grey;
      text-align: center;
      font-size: 0.7em;
      font-family: 'Open Sans', sans-serif;
}

Working Demo Here

Update 1 : See the Updated Link here

Update 2: Working Demo with large font

Answer 2

.button {
  margin: auto;    //try this.
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid;
  border-radius: 50%;
  background: #2E3F47;
  z-index: 10;
}