CSSのみでマルチレベル対応のオフキャンバスメニュー

Result

CSSのみでマルチレベル対応のオフキャンバスメニュー。
他エリアクリックしても閉じない等、JS製に比べて痒いところに手が届いてないのでその辺はJSでサポートすると良いかもです

css

label {
  cursor: pointer;
}

label:focus {
  outline: none;
}

.menu {/*transformで隠しておく*/
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 240px;
  height: 100%;
  transform: translate3d(-240px, 0, 0);
  transition: transform 0.35s;
}

.menu label.menu-toggle {/*ハンバーガーメニューアイコン*/
  position: absolute;
  right: -60px;
  width: 60px;
  height: 60px;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: #fff url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50%/25px 25px no-repeat;
}

.menu ul li > label {/*子を持ってるアイテムにアイコン*/
  background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat;
}

.menu ul li a, .menu ul li label {
  display: block;
  text-align: center;
  padding: 0 20px;
  line-height: 60px;
  text-decoration: none;
  color: #000;
}

.menu ul li a:hover, .menu ul li label:hover {
  color: #666;
}

.menu-checkbox {
  display: none;
}

.menu .menu label.menu-toggle {
  background: none;
}

.menu-checkbox:checked + .menu {/*クリックでスライドイン*/
  transform: translate3d(0, 0, 0);
}

html

<input type="checkbox" id="menu" name="menu" class="menu-checkbox">
  <div class="menu">
    <label class="menu-toggle" for="menu"><span>Toggle</span></label>
    <ul>
      <li>
        <a href="#">Menu-1</a>
      </li>
      <li>
        <a href="#">Menu-2</a>
      </li>
   .
   .
   .

can i use

via

Multi level css only push menu