I'm using HTML, CSS & Javascript to code a burger menu but can't complete the drop down action. The burger menu appears when the screen is small but clicking on the burger menu does nothing. I've used JSS to code the action of opening the menu when clicked on; but can't figure it out. I also tried adding JSS packages to Brackets like eslint, that might recognize const but it didn't work.
const navSlide = () {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
// Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.5}s`;
}
});
// Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
// navbar appears after scrolling
let navbar = document.querySelector(".header-navigation");
if (navbar) {
window.addEventListener("scroll", () => {
if (window.scrollY >= window.innerHeight - 70) {
navbar.classList.add('navbar-show');
} else {
navbar.classList.remove('navbar-show')
}
});
@media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.header {
font-size: 20px;
margin-left: 260px;
width:50%;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top:5vh;
background-color:cadetblue;
display: flex;
flex-direction: column;
align-items:center;
width:40%;
transform:translateX(100%);
transition:transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger{
display: block;
cursor: pointer;
}
.nav-active {
transform: translateX(0%);
}
.main-content-single {
font-size: 10px;
}
@keyframes .navLinkFade {
flow-from: {
opacity: 0px;
transform: translateX(50px);
}
flow-into: {
opacity:1;
transform:translateX(0px)
}
}
.body {
background-color: black;
text-align: center;
font-size: 40px;
font-family:inherit;
margin: 10px 10px;
}
.clearfix::after {
content: '';
display: block;
clear:both;
}
.btn {
padding: .5rem 1rem;
background: blue;
color: white;
border: 1px solid transparent;
border-radius: .5rem;
float: right;
margin-right: 20px;
}
.btn:hover {
color: white;
background:blue;
}
/* Content */
.all {
color:black;;
background-color:whitesmoke;
}
}
<body>
<div class="logo">
<h4>CitizensSalon</h4>
<ul class="nav-links">
<li>
<a href="Writings.html">Blogs</a>
</li>
<li>
<a href="Projects.html">Reports</a>
</li>
<li>
<a href="Policy.html">Policy</a>
</li>
<li>
<a href="#">Investing</a>
</li>
</ul>
<ul class="active">
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</ul>
</div>
</body>
