I am currently in the process of creating a hamburger menu without using JavaScript, which should drop down from the top to the bottom when clicked. The burger menu is situated at the top right corner of the screen, but every time I try to drop down the navigation, it doesn't appear centered; instead, it aligns with the left border of the hamburger div.
Here is how my CSS looks:
@media (max-width: 1099px) {
#menuToggle {
display: block;
position: relative;
z-index: 1;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
}
/*
* hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.
. lots of animation
.
/*
* The Navmenu that has to drop down
*/
#nav-menu {
position: absolute;
transform-origin: 0 0;
background: orange;
height: 100vh;
width: 100vh;
}
}
HTML:
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<nav id="nav-menu">
<li>Functionality</li>
<li>Run a node</li>
<li>About DFINITY</li>
<li>Contact formula</li>
</nav>
</div>
This is how it appears (the arrow indicates how I want it to be):
I aim for it to be positioned at the top left corner of the screen so I can use:
transform: translate(0, -100%);
when the checkbox isn't checked, and:
transform: none;
when it is checked.
I always believed that absolute positioning removes the element from the page flow and resets it, yet it somehow remains underneath my hamburger. Setting transform-origin to 0 0 also does not resolve this issue. What aspect did I misunderstand here?
(Don't worry, I will change the color)