0

i have this code for my hamburger menu, i want it to close when i click outside of it, also , since i have links that take me within my page , it stayes open even when i click the nav-menu- link

i`m a beginner with javascript , i tryed adding another eventlistener on the body , but i cant make it work

const menuBtn = document.querySelector('.menu-btn');
const hamburger = document.querySelector('.menu-btn-burger');
const nav = document.querySelector('.nav');
const navMenu = document.querySelector('.nav-menu');
const navItems = document.querySelectorAll('.nav-menu-item');


let showMenu = false;

menuBtn.addEventListener('click', toggleMenu);


function toggleMenu() {
    if(!showMenu) {
        hamburger.classList.add('open');
        nav.classList.add('open');
        navMenu.classList.add('open');
        navItems.forEach(item => item.classList.add('open'));

        showMenu = true;
    }   
    else {
        hamburger.classList.remove('open');
        nav.classList.remove('open');
        navMenu.classList.remove('open');
        navItems.forEach(item => item.classList.remove('open'));
        

        showMenu = false;
    }
}

 <div class="menu-btn">
        <span class="menu-btn-burger"></span>
      </div>
      <!-- !end-burger -->

      <nav class="nav">
        <ul class="nav-menu">
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Home</a>
          </li>
          <li class="nav-menu-item">
            <a href="#services" class="nav-menu-link">Services</a>
          </li>
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Our Works</a>
          </li>
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Clients</a>
          </li>
          <li class="nav-menu-item">
            <a href="" class="nav-menu-link">Contact</a>
          </li>
        </ul>
      </nav>
      <!-- !end nav -->
Sebastian Timbus
  • 11
  • 2
  • 1
    [Duplicate](https://google.com/search?q=site%3Astackoverflow.com+js+detect+click+outside+of+element) of [How do I detect a click outside an element?](https://stackoverflow.com/q/152975/4642212). – Sebastian Simon May 01 '21 at 19:01
  • i know .. there are alot of this type of question here, but every code id different , and everything i tryed doesn't work , hence my post . Also i'm a complete beginer , so deciphering someone else's code it's hard. – Sebastian Timbus May 01 '21 at 19:07

1 Answers1

0

You can add :

window.addEventListener('click', () => {
  if(showMenu) {
      toggleMenu();
  }
});

when you add an event listener to the window you will "listen" for every click the user clicks over the window, and then when it emits the code will invoke your "toggleMenu" function and it will run the else and close the menu.

your full code snipped:

const menuBtn = document.querySelector('.menu-btn');
const hamburger = document.querySelector('.menu-btn-burger');
const nav = document.querySelector('.nav');
const navMenu = document.querySelector('.nav-menu');
const navItems = document.querySelectorAll('.nav-menu-item');



window.addEventListener('click', () => {
  if(showMenu) {
      toggleMenu();
  }
});


let showMenu = false;

menuBtn.addEventListener('click', toggleMenu);


function toggleMenu() {
    if(!showMenu) {
        hamburger.classList.add('open');
        nav.classList.add('open');
        navMenu.classList.add('open');
        navItems.forEach(item => item.classList.add('open'));

        showMenu = true;
    }   
    else {
        hamburger.classList.remove('open');
        nav.classList.remove('open');
        navMenu.classList.remove('open');
        navItems.forEach(item => item.classList.remove('open'));
      
        showMenu = false;
    }
}
Medinios
  • 296
  • 2
  • 5