Close menu after choosing an option-CodePudding

I have the following code which opens and closes a responsive menu on toggle click of an icon. Menu options jump to anchors in the same HTML page, but the menu stays open.

How can I also close the responsive menu on click of an option?

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
});

<nav >
  <div id="logo"><img src="logo.svg"> </div>
  <a href="#" >
    <span ></span>
    <span ></span>
    <span ></span>
  </a>
  <div >
    <ul>
      <li><a href="#sobre_md">Sobre</a></li>
      <li><a href="#oferta_md">Oferta</a></li>
      <li><a href="#implementacao_md">Implementação</a></li>
      <li><a href="#">Segurança</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Imprensa</a></li>
    </ul>
  </div>
</nav>

CodePudding user response：

You need to define the CSS properties to make things appear and re-appear. A common way is using display: none on a class. Here's an example of toggling the button to hide the menu a the start. Also if you have something that toggles an element on the page, it shouldn't be a link <a> but a <button> since there are added semantics to a button element, for accessibility devices.

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
});

.bar {
  width: 100%;
  height: 1px;
  background: black;
  margin-bottom: 14px
}

.navbar-links.active {
  display: none;
}

<nav >
  <div id="logo"><img src="logo.svg"> </div>
  <button href="#" >
    <span ></span>
    <span ></span>
    <span ></span>
  </button>
  <div >
    <ul>
      <li><a href="#sobre_md">Sobre</a></li>
      <li><a href="#oferta_md">Oferta</a></li>
      <li><a href="#implementacao_md">Implementação</a></li>
      <li><a href="#">Segurança</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Imprensa</a></li>
    </ul>
  </div>
</nav>

Here is how you make it work for when you click on an individual link.

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

const links = navbarLinks.querySelectorAll("a")
toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
});
for(let link of links){
  link.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
  });
}

.bar {
  width: 100%;
  height: 1px;
  background: black;
  margin-bottom: 14px
}

.navbar-links.active {
  display: none;
}

<nav >
  <div id="logo"><img src="logo.svg"> </div>
  <button href="#" >
    <span ></span>
    <span ></span>
    <span ></span>
  </button>
  <div >
    <ul>
      <li><a href="#sobre_md">Sobre</a></li>
      <li><a href="#oferta_md">Oferta</a></li>
      <li><a href="#implementacao_md">Implementação</a></li>
      <li><a href="#">Segurança</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Imprensa</a></li>
    </ul>
  </div>
</nav>