Show a hidden side panel with :checked - css

Question

I would like to have a navigation menu in a side panel which can be toggled into view with an animated hamburger menu. I would like to create this with CSS only, without any JS.
The :checked pseudo-class seems the way to go, but I can't get it to work. The code I have so far:
.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">Nice site</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>Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
Any help and/or advice would be much appreciated!

Answer 1

Fix your typos in CSS, and move the INPUT element outside of #menu
<header id="masthead" class="site-header" role="banner">
<!-- Move it right here -->
<input type="checkbox" id="toggle">
in order for this line of CSS to make sense
#toggle:checked ~ .site-navigation {
There's also another way by using :has() but I'll stick to this simpler solution.