常常看到有些網站的漢堡選單用換圖的方式從 三 --> X
會覺得有點可惜，其實漢堡選單的動態一樣CSS 就可以搞定！
說不定會因為動得太可愛，讓大家一直點 (!?
用到一點JS只是為了偵測點擊換class的樣式～

就是一個div + 兩個偽元素，讓他們旋轉就可以輕鬆搞定。
不過CSS animation裡面的速度選項都有點平淡，所以這次利用了這個網站：
CSS EASING ANIMATION TOOL
有很多動態的貝茲曲線都算好啦，
選擇了ease-in-out-back 有點彈的活潑感！
另外這個網站也可以用，先備用起來：Easing functions

先來看看成果

第1&2個按鈕原理

點擊之後都加上.open的class讓樣式改變。
第一個和第二個幾乎是一樣的，原理就是讓中間槓槓向左消失，
上下兩個槓槓就是讓她轉成X的樣子
不過第二個多轉了90度。(135deg)

//HTML
<div class="menu-icon" id="icon1">
  <div class="menu-icon_hamburger"></div>
</div>

//SCSS
 &.open{
    .menu-icon_hamburger{
      transform: translateX(-30px); //向左消失
      background: transparent;
      
      &:before{
        transform: translate(30px) rotate(45deg);
        background: $menu-color-close;
      }
      &:after{
        transform: translate(30px) rotate(-45deg);
        background: $menu-color-close;
      }
    }
 }

第3個按鈕原理

第三個的原理就是，讓最外層包一個border點擊後出現，
旋轉的只有最下面和中間的槓槓變成X
最上面那個讓他消失

//HTML
<div class="menu-icon" id="icon3"> //這是最外圍圈圈
  <div class="menu-icon_hamburger"> //中間的槓槓
  這裡面有:before //上面的槓槓
    :after //下面的槓槓
  </div>
</div>

//部分SCSS
&.open{
    &.menu-icon{ 
      border: $fatness solid $menu-color-close; //最外層那個圈圈讓他出現
      
    }
    .menu-icon_hamburger{ //中間那一槓槓讓她轉
      transform: rotate(135deg);
      background: $menu-color-close;
      
      
      &:before{
        transform: scale(0); //讓他消失
      background: transparent;
        
      }
      
      &:after{ //最下面那一個槓槓也讓她轉
        transform: rotate(-90deg);
         background: $menu-color-close;
      }
    }
   }

全部的code

全部的code~

//HTML
<div class="menu-icon" id="icon1">
  <div class="menu-icon_hamburger"></div>
</div>
<div class="menu-icon" id="icon2">
  <div class="menu-icon_hamburger"></div>
</div>
<div class="menu-icon" id="icon3">
  <div class="menu-icon_hamburger"></div>
</div>

//SCSS
$menu-color: rgba(241, 90, 34, 1);
$menu-color-close: rgba(25, 181, 254);
$fatness: 5px;
@mixin transition{
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

//第一個按鈕
.menu-icon{
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  margin-left: 5px;
  z-index: 1;
  
  &_hamburger{
    width: 100%;
    height: $fatness;
    background: $menu-color;
    position: relative;
    border-radius: 5px;
    transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    
    &:before, &:after{
      position: absolute;
      content: '';
      width: 100%;
      height: $fatness;
      background:$menu-color;
      border-radius: 5px;
      transform: translateY(-15px);
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
      
    }
    &:before{
      transform: translateY(-15px);
    }
    &:after{
      transform: translateY(15px);
    }
  }
  
  &.open{
    .menu-icon_hamburger{
      transform: translateX(-30px);
      background: transparent;
      &:before{
        transform: translate(30px) rotate(45deg);
        background: $menu-color-close;
      }
      &:after{
        transform: translate(30px) rotate(-45deg);
        background: $menu-color-close;
      }
    }
  }
}

//第二個按鈕，基本上設定都吃第一個，所以把不一樣的地方蓋過而已
#icon2{
  &.open{
    .menu-icon_hamburger{
      transform: translateX(-30px);
      background: transparent;
      &:before{
        transform: translate(30px) rotate(135deg);
        background: $menu-color-close;
      }
      &:after{
        transform: translate(30px) rotate(-135deg);
        background: $menu-color-close;
      }
    }
  }
}

//第三個按鈕，把爸爸層做成一個圓圈圈～
//然後中間那一個bar因為要消失的關係，所以把中間的那個從
//menu-icon_hamburger改成是偽元素，才可以定位

#icon3{
  &.menu-icon{
    border-radius: 50%; 
    margin-left: 0;
    border: $fatness solid transparent;
    @include transition;

  }
  .menu-icon_hamburger{
     width: 100%;
     height: 5px;
     background: $menu-color;
     position: relative;
     border-radius: 5px;
     @include transition;

        &:before, &:after{
          position: absolute;
          content: '';
          width: 100%;
          height: 5px;
          background:$menu-color;
          border-radius: 5px;
          @include transition;

        }
        &:before{
          transform: translateY(-15px);
        }
        &:after{
          transform: translateY(15px);
        }
      }
  
  &.open{
    &.menu-icon{ 
      border: $fatness solid $menu-color-close; //最外層那個圈圈讓他出現
      
    }
    .menu-icon_hamburger{ //中間那一槓槓讓她轉
      transform: rotate(135deg);
      background: $menu-color-close;
      
      
      &:before{
        transform: scale(0); //讓他消失
      background: transparent;
        
      }
      
      &:after{ //最下面那一個槓槓也讓她轉
        transform: rotate(-90deg);
         background: $menu-color-close;
      }
    }
  }
}

//JS
const menuIcons = document.querySelectorAll('.menu-icon')
let isMenuOpen = false;

menuIcons.forEach((icon)=>{
  icon.addEventListener('click',()=>{
  isMenuOpen = !isMenuOpen
  isMenuOpen ? icon.classList.add('open') : icon.classList.remove('open')
})
})

以上！

今天的code

有任何錯誤/問題歡迎留言！