I'm trying to transition into using pure CSS for interface interactivity and animations. I'm currently working on a website where I want to have a full screen menu drawer drop down when a user hits the menu icon.
I have a checkbox (hidden with a label) positioned in the left of a grid with a z-index of 2 at the top of the screen. My menu is 100vw and 100vh, positioned at -100vh top. When I check the checkbox I want to change the position of the menu to top: 0px.
For some reason although the checkbox appears to be functioning checking the checkbox does not change the position of the menu.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/793b1590a4.js"></script>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="top">
<input type="checkbox" id="mt" />
<label for="mt" id="mb"><i class="fa fa-bars fa-2x"></i></label>
<div id="ttl"> Website </div>
<div id="krt"><i class="fas fa-shopping-cart fa-2x"></i> </div>
</div>
<div id="menu">
<ul id="ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
#top {
display: grid;
position: fixed;
z-index: 2;
height: 8vh;
padding: 1vh 3vw 0 3vw;
background: #fff;
grid-template-columns: 10vw 74vw 10vw;
justify-items: center;
align-items: center;
}
#mt {
display: none;
}
#mb {
grid-column: 1;
}
#ttl {
font-size: 4.5vh;
grid-column: 2;
color: #101010;
}
#krt {
grid-column: 3;
}
#menu {
position: fixed;
width: 100vw;
height: 100vh;
top: -100vh;
background: #E0E0E0;
transition: 300ms ease-in-out;
}
#ul {
transition: 300ms ease-in-out;
font-size: 30px;
margin-top: 150px;
}
#ul>li {
list-style: none;
width: 100vw;
}
#mt:checked~#menu {
top: 0px;
}
I've been troubleshooting this for a while and I made a simpler version which works as intended, but I can't figure out what's breaking the menu between the two. The troubleshooting version looks like this:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/793b1590a4.js"></script>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<input type="checkbox" id="menu-button" />
<label for="menu-button" class="menu-icon"><i class="fa fa-bars fa-2x"></i></label>
<div id="menu">
<ul id="ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="container">
<div id="title">
Website
</div>
</div>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
#menu-button:checked~#menu {
left: 0px;
}
#title {
font-size: 5vh;
padding: 0 0 0 75px;
}
#menu {
position: fixed;
height: 100vh;
width: 300px;
left: -300px;
background: #E0E0E0;
transition: 300ms ease-in-out;
}
#ul {
transition: 300ms ease-in-out;
font-size: 30px;
margin-top: 100px;
}
#ul>li {
list-style: none;
margin-top: 20px;
}
#ul>li:last-child {
border: none;
}
#menu-button {
display: none;
}
.menu-icon {
position: absolute;
top: 19px;
left: 30px;
z-index: 1;
}
#container {
transition: 300ms ease-in-out;
}
Can anybody tell me why checking the checkbox doesn't change the position of my menu in the first example and does in the second?
Aucun commentaire:
Enregistrer un commentaire