Burger Menu
Tue Dec 08 2020 14:28:47 GMT+0000 (Coordinated Universal Time)
Saved by
@Mindum
// HTML
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
</div>
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 60px;
cursor: pointer;
z-index: 2;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 60px;
padding: 1rem;
background-color: teal;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger > div {
width: 100%;
height: 2px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: all 0.4s ease;
z-index: 2;
position: relative;
}
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
height: 2px;
z-index: 2;
width: 100%;
background: inherit;
transform: translateY(10px);
}
.menu-wrap .hamburger > div::before {
transform: translateY(-10px);
}
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
.menu-wrap .toggler:checked + .hamburger > div::before,
.menu-wrap .toggler:checked + .hamburger > div::after {
transform: rotate(90deg);
}
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
content_copyCOPY
Comments