~The Code for the JavaScript File~
8/19/2024
Go Here to get Back to Main Tutorial
main.js file
const menuBtn = document.querySelector('.menu-btn');
const hamburger = document.querySelector('.menu-btn__burger');
let showMenu = false;
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu() {
if(!showMenu) {
hamburger.classList.add('open');
showMenu = true;
} else {
hamburger.classList.remove('open');
showMenu = false;
}
}
main.scss file
.menu-btn {
position:absolute;
z-index: 1;
right: 1rem;
top:1rem;
height: 20px;
width: 28px;
cursor: pointer;
@include transition-ease;
&__burger {
position:absolute;
right: 0;
top: 0.5;
height: 3px;
width: 28px;
background: set-text-color($primary-color);
@include transition-ease;
&::before {
content: '';
position: absolute;
top: -8px;
width: 28px;
height: 3px;
background: set-text-color($primary-color);
@include transition-ease;
}
&::after {
content: '';
position: absolute;
top: 8px;
width: 20px;
height: 3px;
background: set-text-color($primary-color);
@include transition-ease;
}
&.open{
transform: rotate(720deg);
background: transparent;
&::before {
transform: rotate(45deg) translate(5px, 8px);
}
&::after{
width: 28px;
transform: rotate(-45deg) translate(3px, -7px);
}
}
}
}
Go Here to get Back to Main Tutorial