javascript - 如何制作垂直菜单图标线

Question

我需要帮助来制作一个菜单图标，而不是三条水平线，而是三条垂直线，点击后会变成 X...就像在这个网站上一样 example ...

到目前为止，我最好的尝试让我走到了这一步...... JSFiddle

我需要一些帮助来使动画工作并使线条垂直...

我的 HTML:

<div class="hamburger" id="menu-button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="menu-button_lable">Menu</span>
</div>

我的 SCSS:

#menu-button {
  position: fixed;
  top: 50%;
  left: 0;
  width              : 60px;
  height             : 45px;
  -webkit-transform  : rotate(0deg);
  -moz-transform     : rotate(0deg);
  -o-transform       : rotate(0deg);
  transform          : rotate(0deg);
  -webkit-transition : .5s ease-in-out;
  -moz-transition    : .5s ease-in-out;
  -o-transition      : .5s ease-in-out;
  transition         : .5s ease-in-out;
  cursor             : pointer;
  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 25px;
    background: #d3531a;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    &:nth-child(1) {
      top                      : 12px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(2) {
      top                      : 18px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(3) {
      top                      : 24px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
  }
  .menu-button_lable {
    font-size: .7857142857rem;
    letter-spacing: .06em;
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
    margin-top: 0.75rem;
    font-weight: 500;
    position: relative;
  }
  &.open span {
    &:nth-child(1) {
      -webkit-transform : rotate(45deg);
      -moz-transform    : rotate(45deg);
      -o-transform      : rotate(45deg);
      transform         : rotate(45deg);
      top               : 6px;
      left              : 8px;
    }
    &:nth-child(2) {
      width   : 0;
      opacity : 0;
    }
    &:nth-child(3) {
      -webkit-transform : rotate(-45deg);
      -moz-transform    : rotate(-45deg);
      -o-transform      : rotate(-45deg);
      transform         : rotate(-45deg);
      top               : 24px;
      left              : 8px;
    }
  }
}

和我的 JS:

$(document).ready(function(){
    $('#nmenu-button').click(function(){
        $(this).toggleClass('is-active');
    });
});

Answer 1

请看下面。为每一行添加额外的 CSS，以便在激活时正确定位它。

$(document).on("click", "#menu-button", function() {
  $(this).toggleClass('is-active');
});

#menu-button {
  cursor: pointer;
  position: relative;
  margin-top: 1rem;
}

.line {
  display: block;
  position: absolute;
  height: 2px;
  width: 25px;
  background: #d3531a;
  opacity: 1;
  transform: rotate(90deg);
  transition: .25s ease-in-out;
}

.hamburger .line:nth-child(1) {
  top: 0;
  left: 0;
}
/* Added */
.hamburger.is-active .line:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: left top;
  top: -9px;
  left: 9px;
}

.hamburger .line:nth-child(2) {
  top: 0;
  left: 10px;
}
/* Added */
.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}

.hamburger .line:nth-child(3) {
  top: 0;
  left: 20px;
}
/* Added */
.hamburger.is-active .line:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: right top;
  top: -9px;
  left: 1px;
}

.menu-button_lable {
  font-size: .7857142857rem;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  font-weight: 500;
  position: absolute;
  left: 45px;
  top: 50%;
  transform: translate(0, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamburger" id="menu-button">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
  <span class="menu-button_lable">Menu</span>
</div>