I want to close my menu by clicking on a link or when I click outside the menu. In the interest of keeping things nice and light, I don't want to use jQuery.

How do I do it?

<nav class="nav">
  <div class="nav__left">
    <h3><a href="#home">DenisMasot</a></h3>
  </div>
  <input type="checkbox" /><label class="burger" for="nav"></label>
  <ul  class="nav__right">
    <li class="active">
      <h3><a href="#home">home</a></h3>
    </li>
    <li>
      <h3><a href="#about">À propos</a></h3>
    </li>
    <li>
      <h3><a href="#production">Réalisation</a></h3>
    </li>
    <li>
      <h3><a href="#contact">Contact</a></h3>
    </li>
  </ul>
</nav>

I want to close my menu by clicking on a link or when I click outside the menu. In the interest of keeping things nice and light, I don't want to use jQuery.

How do I do it?

<nav class="nav">
  <div class="nav__left">
    <h3><a href="#home">DenisMasot</a></h3>
  </div>
  <input type="checkbox" /><label class="burger" for="nav"></label>
  <ul  class="nav__right">
    <li class="active">
      <h3><a href="#home">home</a></h3>
    </li>
    <li>
      <h3><a href="#about">À propos</a></h3>
    </li>
    <li>
      <h3><a href="#production">Réalisation</a></h3>
    </li>
    <li>
      <h3><a href="#contact">Contact</a></h3>
    </li>
  </ul>
</nav>

• javascript
• html
• menu

Share Improve this question Follow edited Feb 14, 2017 at 7:38 Pang 10.1k146146 gold badges8686 silver badges124124 bronze badges asked Feb 13, 2017 at 9:55 DenisMasotDenisMasot 74755 gold badges1212 silver badges2121 bronze badges 2

• Hope this will help link – Souad Commented Feb 13, 2017 at 9:56
• here's something that might interest you: Javascript on click hide – Jeremy Comelli Commented Feb 13, 2017 at 9:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

It can be done with DOM API using addEventListener() on document. You then need logic to find if the click target was on the menu or any of its elements, or somewhere else on the page.

isDescendent() borrowed from How to check in Javascript if one element is contained within another

The menu can then be hidden with element.style.display = 'none'

I would question motivation to not use jQuery, you'll be making a lot more work for yourself in the long run...

var menu = document.querySelector("nav.nav");
var checkbox = document.querySelector("input[type=checkbox]");

document.addEventListener("click", function(e) {
  if (menu != e.target && 
      ! isDescendant(menu, e.target)) {
    console.log("Clicked somewhere else");
    menu.style.display = 'none';
    checkbox.checked = false;
  }
  
}, false);

function isDescendant(parent, child) {
     var node = child.parentNode;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

<div>
  Rest of page...
</div>

<nav class="nav">
    <div class="nav__left">
      <h3><a href="#home">DenisMasot</a></h3>
    </div>
    <input type="checkbox" /><label class="burger" for="nav"></label>
    <ul  class="nav__right">
      <li class="active">
        <h3><a href="#home">home</a></h3>
      </li>
      <li>
        <h3><a href="#about">À propos</a></h3>
      </li>
      <li>
        <h3><a href="#production">Réalisation</a></h3>
      </li>
      <li>
        <h3><a href="#contact">Contact</a></h3>
      </li>
    </ul>
  </nav>

one way, hope it helps

    $(document).ready(function() {
        $('.click').click(function() {
                $('.nav__right').slideToggle("fast");
        });
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="nav">
    <div class="nav__left">
      <h3><a href="#home">DenisMasot</a></h3>
    </div>
    <input type="checkbox" /><label class="burger" for="nav"></label>
  <button class="click">click me</button>
    <ul  class="nav__right">
      <li class="active">
        <h3><a href="#home">home</a></h3>
      </li>
      <li>
        <h3><a href="#about">À propos</a></h3>
      </li>
      <li>
        <h3><a href="#production">Réalisation</a></h3>
      </li>
      <li>
        <h3><a href="#contact">Contact</a></h3>
      </li>
    </ul>
  </nav>