HTML & CSS Slide Out Navigation - What am I doing wrong? - html

Question

I am trying to create a navigation bar that slides out from the left side of the screen, without the use of JavaScript. All of the navigation elements are there, but hidden for the initial page opening, clicking on the "V" in the top right corner should open up the navigation but doesn't. Also, There is no other styling included on my page, I just want to make this work before moving forward.
I have tried a few different methods for creating this effect but to no avail. This most recent method was pulled directly from a tutorial on creating exactly what I was hoping to achieve, and still nothing.
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked - .menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>

Answer 1

Your selector is wrong, - isn't a valid selector
Change
#menu-toggle:checked - .menu
To
#menu-toggle:checked ~ #nav-div>.menu
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked~#nav-div>.menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>

Answer 2

I guess that you forgot to add animation.
#keyframes slidefFromRight{
0%{
transform:translateX(100px);
opacity:0;
}
50%{
transform:translateX(-30px);
}
100%{
transform:translateX(0);
opacity: 1;
}
}
Put the animation name under selector
#nav-div{
animation:slidefromRight;
animation-duration: 4s;
animation-delay: 0.5s;
opacity:0;
animation-fill-mode:forwards;
}