J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de passer aux vues via un menu hamburger animé. Je veux le créer en utilisant uniquement CSS et non n'importe quel JS.

:checked Les pseudo-cours semblent être la voie à suivre, mais je n'arrive pas à les faire fonctionner. Code que j'ai jusqu'à présent :

.site-navigation {
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.toggle-btn {
  display: block;
  position: fixed;
  z-index: 10;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.toggle-btn .bar {
  width: 30px;
  height: 2px;
  margin: 7px auto;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}

.toggle-btn .bar:nth-child(2) {
  width: 28px;
}

#toggle {
  display: none;
}

#toggle:checked~.site-navigation {
  display: block;
  opacity: 1;
  visibility: visible;
}

#toggle:checked~nav ul {
  top: 70px;
}

#toggle:checked~nav ul li {
  transform: translateY(0px);
  opacity: 1;
}

#toggle:checked+label.toggle-btn .bar {
  background-color: #efefef;
}

#toggle:checked+label.toggle-btn .bar:nth-child(2) {
  opacity: 0;
}

#toggle:checked+label.toggle-btn .bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

#toggle:checked+label.toggle-btn .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

<header id="masthead" class="site-header" role="banner">
  <div class="container">

    <div id="brand">
      <h1 class="site-title"><a href="#">Nice site</a></h1>
    </div>

    <div id="menu">
      <input type="checkbox" id="toggle">
      <label class="toggle-btn toggle-btn__cross" for="toggle">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
              </label>
    </div>

    <div class="clear"></div>
  </div>
  <!--/container -->

  <!-- .site-navigation .main-navigation -->
  <nav role="navigation" id="navigation" class="site-navigation main-navigation">
    <span class="menuLabel">menu</span>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

Toute aide et/ou conseil serait grandement apprécié !