javascript中單擊鼠標單擊動畫菜單中的問題

Question

我已經從此鏈接http://codepen.io/MrBambule/pen/jIseg創建了一個帶有單個按鈕的簡單菜單

現在我想減小按鈕的尺寸，

這樣我更改了代碼，

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

});

所以按鈕的大小減小了，但是當我單擊按鈕時，它顯示列表不正確。

有人可以幫助我，如何解決這一問題，在此先感謝。

Answer 1

如下更改CSS。

在這里工作JSFIDDLE

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

在這里工作演示

更新1： 在此處查看更新的鏈接

更新2： 使用大字體工作演示

Answer 2

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