html Сендвичменюкнопка，превращаетсявкрестик

Posted 2021-05-11

.mobile-menu-button {
  display: block;
  color: $color-green;
  position: relative;
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 250ms ease-in-out;
    display: block;
    opacity: 1;
    width: 30px;
    height: 3px;
    background-color: $color-green;
  }
  span:nth-of-type(1) {
    margin: -9px 0 0;
  }
  span:nth-of-type(3) {
    margin: 9px 0 0;
  }

  &.active span:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(45deg);
    margin: 0;
  }
  &.active span:nth-of-type(2) {
    opacity: 0;
  }
  &.active span:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
    margin: 0;
  }
}

$('#mobile-menu-button').click(function() {
    $(this).toggleClass('active');
});

<div id="mobile-menu-button" class="mobile-menu-button">
    <span></span>
    <span></span>
    <span></span>
</div>