01hamburger-menu.css

.hamb-bt-demo{
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  width: 40px;
  height: 40px;
  background-color: #C8E6C9;
}
.hamb-line{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 6%;
  background-color: #388E3C;
  transition: transform .2s; 
}
.hamb-line.line1{
  top: 25%;
}
.hamb-line.line2{
  top: 50%;
}
.hamb-line.line3{
  top: 75%;
}
.hamb-line.line1.open,.hamb-line.line2.open{
  top: 50%;
  transform: translate(-50%,-50%) rotateZ(45deg);
}
.hamb-line.line3.open{
  top: 50%;
  transform: translate(-50%,-50%) rotateZ(-45deg);
}
.display{
  position: relative;
  width: 150px;
  height: 240px;
  border: 1px solid #333;
  overflow-x: hidden;
}
.nav-demo{
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  background-color: rgba(0,0,0,.4);
  transition: left .2s;
}
.nav-demo.open{
  left: 0;
}
.nav-li{
  width: 95%;
  margin: 0 auto;
  background-color: #C8E6C9;
}
.nav-li + .nav-li{
  margin-top: 5px;
}

02hamburger-menu.html

<div class="display">
  <div class="hamb-bt-demo">
    <div class="hamb-line line1"></div>
    <div class="hamb-line line2"></div>
    <div class="hamb-line line3"></div>
  </div>
  <div>content</div>
  <div class="nav-demo">
    <ul class="nav-list">
      <li class="nav-li">link1</li>
      <li class="nav-li">link2</li>
      <li class="nav-li">link3</li>
      <li class="nav-li">link4</li>
      <li class="nav-li">link5</li>
    </ul>
  </div>
</div>

03hamburger-menu.js

const hamb_bt_demo = document.getElementsByClassName('hamb-bt-demo');
const nav = document.getElementsByClassName('nav-demo');
const hamb_lines = document.getElementsByClassName('hamb-line');
[...hamb_bt_demo].forEach(el=>{
  el.addEventListener('click',hamb_toggle_demo);
});

function hamb_toggle_demo(){
  [...hamb_lines].forEach(el=>{
    el.classList.toggle('open');
  });
  [...nav].forEach(el=>{
    el.classList.toggle('open');
  });
}