title: Close toggle menu after clicking outside of it and on a link
body: <p>I'm currently using this simple toggle menu from w3school. </p>
  
  <p>I was wondering how can this be edited in order to close when clicked outside of it or on a link (Logo, News, Contact, About)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;style&gt;
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .mobile-container {
    max-width: 480px;
    margin: auto;
    background-color: #555;
    height: 500px;
    color: white;
    border-radius: 10px;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .active {
    background-color: #4CAF50;
    color: white;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Simulate a smartphone / tablet --&gt;
  &lt;div class="mobile-container"&gt;
  
  &lt;!-- Top Navigation Menu --&gt;
  &lt;div class="topnav"&gt;
    &lt;a href="#home" class="active"&gt;Logo&lt;/a&gt;
    &lt;div id="myLinks"&gt;
      &lt;a href="#news"&gt;News&lt;/a&gt;
      &lt;a href="#contact"&gt;Contact&lt;/a&gt;
      &lt;a href="#about"&gt;About&lt;/a&gt;
    &lt;/div&gt;
    &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;
      &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div style="padding-left:16px"&gt;
    &lt;h3&gt;Vertical Mobile Navbar&lt;/h3&gt;
    &lt;p&gt;This example demonstrates how a navigation menu on a mobile/smart phone could look like.&lt;/p&gt;
    &lt;p&gt;Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;!-- End smartphone / tablet look --&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  function myFunction() {
    var x = document.getElementById("myLinks");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kjsdfx3v/" rel="nofollow noreferrer">JSFiddle Demo</a></p>