CSSだけでスマホ用メニューの作成

こんにちは、せぃゆーです。

今日はCSSだけでスマホ用のメニューボタンと横からスライドで表示されるメニューを作成しようと思います。

<div id="nav">
  <input type="checkbox" id="menu_btn_check">
  <label for="menu_btn_check" id="menu_btn">
    <div class="toggle_btn">
    </div>
  </label>
  <nav id="menu">
    <div class="inner">
      <ul>
        <li><a href="#" class="active">メニュー1</a></li>
        <li><a href="#" class="">メニュー2</a></li>
        <li><a href="#" class="">メニュー3</a></li>
      </ul>
    </div>
  </nav>
  <div id="mask"></div>
</div>

/* checkboxは表示しない */
#menu_btn_check {
  display: none;
}

#menu {
  display: block;
  position: fixed;
  top: 0;
  left: -240px;
  width: 240px;
  bottom: 0;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: 1s;  
  z-index: 3;
}

/* #menu_btn_checkがチェックされた場合menuをleft: 0の位置に移動 */
#menu_btn_check:checked~#menu {
  left: 0;
  transition: 1s;  
}


/* 表示非表示ボタン */
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 30px;
  cursor: pointer;
  z-index: 3;
  transform: rotate(-360deg);
  transition: 1s;  
}
.toggle_btn::before  {
  content: "OPEN";
}
#menu_btn_check:checked~#menu_btn .toggle_btn {
  left: 260px;
  transform: rotate(360deg);
  transition: 1s;
}
#menu_btn_check:checked~#menu_btn .toggle_btn::before {
  color: white;
  content: 'CLOSE';
}

/* ----- 背景色 ----- */
/* デフォルトでは表示しない */
#mask {
  display: none;
}
/* メニューボタンをチェックしたら背景の色を変更 */
#menu_btn_check:checked~#mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
  transition: all .5s;
}
/* ----- 背景色 ----- */

/* ここから下はナビゲーションのデザインなので適宜変更 */
#menu .inner {
  padding: 25px;
}

#menu .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}

#menu .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}

#menu .inner ul li a.active {
  color: #ffffff;
  background-color: #da3c41;
}

#menu .inner ul li a:hover {
  background: #e4e4e4;
}

#menu .inner ul li a:hover:not(.active) {
  background: #e4e4e4;
  background-color: #1b2538;
}