How can we close a toggle menu with an outside click

Question

I'm new to coding, I am have a made a decent looking website (https://garibpathshala.in/) with a toggle nav menu for mobiles.

is there any way so that if we click outside the menu it'll close the menu.

Please have a look at my code and help me :)

HTML

      <ul class="header-nav-links">
    <li class="active"><a href="https://garibpathshala.in">HOME</a></li>
    <li><a href="#projects_section">PROJECTS</a></li>
    <li><a href="#meet_the_team_section">TEAM</a></li>
    <li><a href="#about_us_section">ABOUT</a></li>
    <li><a href="https://gallery.garibpathshala.in">GALLERY</a></li>
    <li><a href="https://contact.garibpathshala.in">CONTACT</a></li>
    <li><a href="https://donate.garibpathshala.in">DONATE</a></li>
    <li><a href="https://join.garibpathshala.in">JOIN US</a></li>
   </ul>
  
   <div class="burger">
      <div line1></div>
      <div line2></div>
      <div line3></div>
    </div>

JS

const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".header-nav-links");
const links = document.querySelectorAll(".header-nav-links li");

//Toggle Nav
burger.addEventListener("click", () => {
    navLinks.classList.toggle("open");

//Animate Links
links.forEach((link, index) => {
    if (link.style.animation) {
        link.style.animation = ""
    }else{
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+0.2}s`;
    }
});
});

Here is a screenshot of the nav menu

Answer 1

You could remove "open" class from the menu if the event.CurrentTarget is not the hamburger menu and anything else in the document (html or body) is clicked.

You would also need to stopImmediatePropagation on the .hamburger and navLinks itself to stop those from being registered as clicks to the body, since they are children of the body and the event would otherwise bubble up to the body. MDN reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles

const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".header-nav-links");
const links = document.querySelectorAll(".header-nav-links li");
const body = document.querySelector('html');

//Toggle Nav
burger.addEventListener("click", (e) => {
    navLinks.classList.toggle("open");
    e.stopImmediatePropagation();

    //Animate Links
    links.forEach((link, index) => {
        if (link.style.animation) {
            link.style.animation = "";
        }else{
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+0.2}s`;
        }
    });
});

navLinks.addEventListener("click", (eve) => {
     eve.stopImmediatePropagation();
});

body.addEventListener("click", (ev) => {

      if (ev.currentTarget != burger) {
          navLinks.classList.remove("open");
      }
});

.burger {
    display: block;
    cursor:pointer;
}

.header-nav-links {
    display: block;
}

.header-nav-links.open {
    transform: translateX(0%);
}

 
.header-nav-links {
    right: 0;
    position: fixed;
    height: 92vh;
    top: 16vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

.header-nav-links li {
    list-style-type: none;
}

.header-nav-links li:hover {
    border: 1px solid #fff;
    border-radius: 6pc;
    background-color: #007bff;
}

.header-nav-links a {
    color: whitesmoke;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 16px;
    border: 0px solid white;
    transition: 400ms;
    padding: 5px 15px;
    border-radius: 19px; 
}

<ul class="header-nav-links">
    <li class="active"><a href="https://garibpathshala.in">HOME</a></li>
    <li><a href="#projects_section">PROJECTS</a></li>
    <li><a href="#meet_the_team_section">TEAM</a></li>
    <li><a href="#about_us_section">ABOUT</a></li>
    <li><a href="https://gallery.garibpathshala.in">GALLERY</a></li>
    <li><a href="https://contact.garibpathshala.in">CONTACT</a></li>
    <li><a href="https://donate.garibpathshala.in">DONATE</a></li>
    <li><a href="https://join.garibpathshala.in">JOIN US</a></li>
</ul>
  
<div class="burger">
  BURGER
  <div line1></div>
  <div line2></div>
  <div line3></div>
</div>