Afficher les panneaux latéraux masqués : coché

Question

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é !

Answer 1

Corrigez une faute de frappe dans CSS et déplacez l'élément INPUT à l'extérieur #menu

Pour donner du sens à cette ligne de CSS

#toggle:checked ~ .site-navigation {

Il existe une autre façon, c'est d'utiliser :has() mais je m'en tiendrai à cette solution plus simple.