Hamburger Icon
Hamburger Icon Styles
:root {
--size: 40px;
--bar-thickness: 2px;
--bar-gap: 8px;
--bar-color: #04BCFC;
}
.hamburger {
width: var(--size);
height: calc(var(--bar-thickness) * 3 + var(--bar-gap) * 2);
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
transition: transform 0.3s ease;
}
.bar {
width: 100%;
height: var(--bar-thickness);
background-color: var(--bar-color);
border-radius: calc(var(--bar-thickness) / 2);
transition: all 0.3s ease;
transform-origin: center;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(calc(var(--bar-gap) + var(--bar-thickness))) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(calc(-1 * (var(--bar-gap) + var(--bar-thickness)))) rotate(-45deg);
}
Menu Container Styles
.off-canvas {
position: fixed;
top: 0;
left: 0;
width: 75vw;
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.68, -0.05, 0.27, 1);
z-index: 9999;
}
.off-canvas.open {
transform: translateX(0);
}
Hamburger Script
© 2024 Dev Ash. All rights reserved.