Greetings.
I am working on a one-page solution where each section has an ID.
I have made this very simple responsive menu, which looks quite nice, but I have noticed one major flaw.
In mobile view, if I click on a list from the navbar slide-menu, the page will scroll down to that particular ID. The problem is that the user needs to click on the navbar to manually close it, meaning that if they click on one of the links, they won’t actually know if they are taken to that section, because the menu is in the way.
What I want is for the menu to close after clicking the link, so that people can see the page scrolling down to the section they were looking for.
How can I accomplish this?
If possible I would like an ES6 solution without jquery.
console.clear();
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('nav-active');
navLinks.forEach((link,index) =>{
if(link.style.animation) {
link.style.animation=''
} else {
link.style.animation=`navLinkFade 0.5s ease forwards ${index /7 + 0.2}s`;
}
console.log(index / 7);
});
burger.classList.toggle('toggle');
});
}
navSlide();