I'm currently in the process of shifting towards using pure CSS for interface animations and interactivity. Specifically, I am developing a website where I aim to implement a full-screen menu drawer that drops down when the user clicks on the menu icon.
To achieve this, I have positioned a hidden checkbox within a grid at the top of the screen with a z-index of 2. The menu itself is set to be 100vw and 100vh, initially positioned at -100vh from the top. When the checkbox is checked, I intend to change the position of the menu to be at the top (0px).
However, despite the checkbox appearing functional, checking it does not seem to affect the position of the menu as expected.
Here is an example of the HTML code:
<!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>
And the corresponding CSS code:
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;
}
...
Lines truncated for brevity...
...
}
While troubleshooting this issue, I created a simplified version which behaves as intended. However, I am struggling to pinpoint the exact reason why the functionality breaks down in my initial implementation. Here's an example of the simplified version that works smoothly:
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>
And its corresponding CSS:
html, body {
margin: 0;
padding: 0;
}
...
Lines truncated for brevity...
...
}
If anyone can provide insights into why toggling the checkbox fails to change the position of the menu in the first scenario but works fine in the second, I would greatly appreciate it!