input과 :checked를 활용한 햄버거 메뉴만들기

<style>
#trigger {
  display: none;
  }
  
  label[for=trigger]{
  width: 30px;
  height: 20px;
  display: block;
  position: relative;
  cursor: pointer;
  }
  
  label[for=trigger] span{
  display: block;
  height: 2px;
  background-color: #000;
  position: absolute;
  left: 0;
  width: 100%;
  transition: 0.3s;
  z-index: 1000;
  }
  
  label[for=trigger] span:nth-child(1){ top: 0; }
  
  label[for=trigger] span:nth-child(2){ top: 50%; }
  
  label[for=trigger] span:nth-child(3){ top: 100%; }
  
  input[id=trigger]:checked + label span:nth-child(1){
  transform: rotate(45deg);
  top: 50%;
  }
  
  input[id=trigger]:checked + label span:nth-child(2){
  opacity: 0;
  }
  
  input[id=trigger]:checked + label span:nth-child(3){
  transform: rotate(-45deg);
  top: 50%;
  }
  
  .sidebar {
  width: 250px;
  height: 100vh;
  background-color: pink;
  position: fixed;
  top: 0;
  left: -250px;
  transition: 0.3s
  }
  
  input[id=trigger]:checked ~ .sidebar{
  left: 0;
  }
</style>



<div class="container">
  <input type="checkbox" id="trigger">
  <label for="trigger">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <div class="sidebar"></div>
</div>

햄버거 메뉴 클릭하면