<!--HTML-->

<header class="header">
    
  <div class="nav-wrapper">
    <nav class="header-nav">
      <ul class="nav-list">
        <li class="nav-item"><a href="#">ハンバーガーメニュー1</a></li>
        <li class="nav-item"><a href="#">ハンバーガーメニュー2</a></li>
        <li class="nav-item"><a href="#">ハンバーガーメニュー3</a></li>
      </ul>
    </nav>
  </div>

  <div class="burger-btn">
    <span>
      <span class="bar bar_top"></span>
      <span class="bar bar_mid"></span>
      <span class="bar bar_bottom"></span>
    </span>
  </div>

</header>


<!--CSS-->

.burger-btn{
  display: block;
  width: 39px;
  height: 39px;
  position: relative;
  z-index: 3;
}
.bar{
  width: 20px;
  height: 1px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
}
.bar_top{
  top: 10px;
}
.bar_mid{
  top: 50%;
  transform: translate(-50%,-50%);
}
.bar_bottom{
  bottom: 10px;
}
.burger-btn.close .bar_top{
  transform: translate(-50%,10px) rotate(45deg);
  transition-duration: .3s;
  background-color:#fff;
}
.burger-btn.close .bar_mid{
  opacity: 0;
  transition-duration: .3s;
}
.burger-btn.close .bar_bottom{
  transform: translate(-50%,-8px) rotate(-45deg);
  transition-duration: .3s;
  background-color:#fff;
}
.nav-wrapper{
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.header-nav{
  width: 100%;
  height: 100%;
  background-color:#1B1310;
  z-index: 2;
}
.header-nav .nav-list{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
.header-nav .nav-item{
  margin-right: 0;
  margin-bottom: 40px;
}
.nav-list a{
  color:#fff;
}


<!--jQuery-->

$(function(){
  $('.burger-btn').on('click',function(){
    $('.burger-btn').toggleClass('close');
    $('.nav-wrapper').fadeToggle(500);
  });
});