title: hide sidebar when click anywhere in page
body: <p>I have an animate sidebar which appears when user clicks on a hamburger button.
  Here is the structure :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#nav-toggle').click(function() {
    if($('#nav-toggle').hasClass('active')){
      $('.menu').animate({
        right: "0px"
      }, 200);
    }else{
      $('.menu').animate({
        right: "-285px"
      }, 200);
    }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu{
      right:-285px;
      height:100%;
      position: fixed;
      width: 285px;
      z-index: 1;
      background-color: #111111;
  }
  .menu ul {
    border-top: 1px solid #636366;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
  }
  .menu li a{
      color:white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="menu"&gt;
        &lt;!-- Menu --&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Actually we can open menu by clicking on <code>#nav-toggle</code> element and close it by clicking on this element too. I'd like to allow user to close this menu by clicking anywhere in the page.
  How can I do do that? I tried with <code>e.preventDefault();</code> in my if statement but it doesn't work.</p>
  
  <p>Thanks!</p>