CODEWITHSUNDEEP
javascripthtmlnavbar
Pabblo96
Pabblo96

Reputation: 49

Hidden menu after click on links - HTML/JS

I'm trying to make a hidden responsive menu after clicking on links. When I click on the first link it's working but when I click on another link menu doesn't disappear. I was also tried nava = document.querySelectorAll('.nav_links a'); but then menu didn't close even after clicking on the first link.

const navSlide = () => {
    const burger = document.querySelector('.nav_links_menu');
    const nav = document.querySelector('.nav_links');
    const nava = document.querySelector('.nav_links a');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        //Burger Animation
        burger.classList.toggle('toggle');
    })

    nava.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        burger.classList.toggle('toggle');
    })
}

Upvotes: 2

Views: 235

Answers (1)

Maik Lowrey
Maik Lowrey

Reputation: 17556

You have to bind all tags. And you already tried that:

nava = document.querySelectorAll('.nav_links a'.

Then you have iterate every element of this collection and add event listener like that:

const navSlide = () => {
    const burger = document.querySelector('.nav_links_menu');
    const nav = document.querySelector('.nav_links');
    const nava = document.querySelectorAll('.nav_links a');

    nava.forEach(n => {
      n.addEventListener('click', (e) => {
        e.preventDefault();
        nav.classList.toggle('nav_active');
        burger.classList.toggle('toggle');
      })  
    })
    
}

navSlide();
.nav_active {
  background: green;
}
<div class="nav_links_menu">
  <div class="nav_links">
    <a href="nav_active">1</a>
    <a href="">2</a>
    <a href="">3</a>
  </div>
</div>

Upvotes: 3

Related Questions