#7-汉堡Menu动起来！(CSS就搞定啦！)

常常看到有些网站的汉堡选单用换图的方式从 三 --> 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

有任何错误/问题欢迎留言！