CSS（Scss）とjQueryでハンバガーメニューを作ってみました。

今回のハンバーガーメニューは、全画面表示でメニューリストをしたからぬるっと表示させる仕様にしてみました。

また、三本線にも少し動きをつけてみました。

HTML

/**html**/

<header>
<!-- Hamburger -->
<div class="hamburger hamburger-single" id="Hamburger">
<div class="hamburger__container">
 <span class="hamburger__top"></span>
 <span class="hamburger__middle"></span>
 <span class="hamburger__bottom"></span>
</div>
</div>

<!-- Menu -->
<div class="sp__menu">
 <div class="sp__menu__container">
  <div class="sp__menu__nav">
   <ul id="menu__hamburger__nav" class="sp__menu__ul">
    <li><a href="">MENU01</a></li>
    <li><a href="">MENU02</a></li>
    <li><a href="">MENU03</a></li>
    <li><a href="">MENU04</a></li>
    <li><a href="">MENU05</a></li>
    <li><a href="">MENU06</a></li>
   </ul>
 </div>
</div>
</header>

CSS（Scss）

/**scss***/

body {
  background-color: #ffaa00;
}


.header {
  position: relative;
}


/*ハンバーガーメニュー*/
.hamburger {
  width: 50px;
  height: 40px;
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  &__container {
    display: block;
  }
  &__top,
  &__middle,
  &__bottom {
    display: block;
    width: 45px;
    height: 1px;
    background-color: #000;
  }
  &__middle {
    margin: 10px 0 10px 0;
    opacity: 1;
    transition: margin 300ms ease-in-out, opacity 0s ease-in-out;
  }
  &__top,
  &__bottom {
    transform: rotate(0);
    transition: transform 300ms ease-in-out, background-color 300ms ease-in-out;
  }
  /*ハンバーガーをクリックしたら起こる処理*/
  &.js-menu-open {
    transition-delay: 300ms;
    .hamburger__top,
    .hamburger__middle,
    .hamburger__bottom {
      background-color: #fff;
    }
    .hamburger__middle {
      margin: -1px 0 -1px 0;
      opacity: 0;
      transition: margin 300ms ease-in-out, opacity 0s ease-in-out;
    }
    .hamburger__top,
    .hamburger__bottom {
      transition-delay: 300ms;
    }
    .hamburger__top {
      transform: rotate(45deg);
    }
    .hamburger__bottom {
      transform: rotate(-45deg);
    }
  }
}


/*スマホナビメニュー*/
.sp__menu {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #506d53;
  visibility: hidden;
  opacity: 0;
  transition: .3s cubic-bezier(.11,.24,.64,1);
  &.js-open {
    z-index: 100;
    opacity: 1;
    visibility: visible;
    transition: .3s cubic-bezier(.11,.24,.64,1);
  }
  &__container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  &__nav {
    ul {
      li {
        text-align: center;
        overflow: hidden;
        padding-bottom: 3px;
        &:nth-child(even) {
          margin: 35px 0;
        }
        /*ひとつずつ.05秒ずつずらして表示する*/
        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            a {
              transition-delay: 50ms * $i;
            }
            a::before {
              transition-delay: 130ms * $i;
            }
          }
        }
        a {
          font-size: 18px;
          color: #fff;
          text-decoration: none;
          display: inline-block;
          letter-spacing: 1.3px;
          opacity: 0;
          transform: translate3d(0, 100%, 0);
          transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
          position: relative;
          &::before {
            content: '';
            position: absolute;
            z-index: -1;
            bottom: -3px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transform-origin: 100% 0;
            transform: scaleX(0);
            transition: transform 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99);
          }
          &.js-menu-open {
            opacity: 1;
            transform: translate3d(0,0,0);
            &::before {
              transform-origin: 0 0;
              transform: scaleX(1);
            }
          }
        }
      }
    }
  }
}

jQuery

/**jQuery**/

$("#Hamburger").click(function(){
  $(this).toggleClass('js-menu-open');
  $('.sp__menu').toggleClass('js-open');
  $('#menu__hamburger__nav li a').toggleClass('js-menu-open');
});