<input type="checkbox" id="toggle-nav">
<label for="toggle-nav" class="hamburger">
<div></div>
<div></div>
<div></div>
</label>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;300;400;500;600;700;800;900&display=swap');
#toggle-nav {
display: none;
&:checked {
~ .hamburger {
height: 28px;
div {
&::before,
&::after {
background-color: #fff;
}
&:nth-of-type(1) {
margin-top: 6px;
transform: rotate(135deg);
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
margin-top: -12px;
transform: rotate(-135deg);
}
}
}
~ .menu {
opacity: 1;
visibility: visible;
}
}
}
.hamburger {
cursor: pointer;
position: fixed;
z-index: 1020;
top: 32px;
right: 32px;
width: 32px;
height: 14px;
margin: 0;
padding: 0;
&:hover div {
&::before { transform: scaleX(0); }
&:nth-of-type(1)::before { transition: transform .5s 0s; }
&:nth-of-type(2)::before { transition: transform .5s .1s; }
&:nth-of-type(3)::before { transition: transform .5s .2s; }
&::after { transform: scaleX(1); }
&:nth-of-type(1)::after { transition: transform .5s .3s; }
&:nth-of-type(2)::after { transition: transform .5s .4s; }
&:nth-of-type(3)::after { transition: transform .5s .5s; }
}
div {
position: relative;
width: 100%;
height: 2px;
background-color: transparent;
transition: background-color .5s, transform .5s;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform-origin: right center;
will-change: transform;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}
&:nth-of-type(2) {
margin: 4px 0;
}
}
}
.menu {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1010;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Roboto Slab', serif;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: all .5s ease-out;
will-change: opacity, visibility;
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin-bottom: 4px;
font-size: 32px;
a, a:hover {
color: #fff;
text-decoration: none;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.