Trying to get my navbar to close when I click off it?
<p>This is the first time I'm doing anything with javvascript. I currently have this code for my website:</p>

<p>html:</p>

<pre><code>&lt;head&gt;
&lt;title&gt;My Website&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
&lt;link href="navbar.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

&lt;body class="menu"&gt;
&lt;header&gt;
&lt;a href="#" class="menu-toggle"&gt;&lt;img src="http://i.imgur.com/p2Yxaex.jpg" onmouseover="this.src='http://i.imgur.com/Vrl4tBl.jpg'" onmouseout="this.src='http://i.imgur.com/p2Yxaex.jpg'" /&gt;&lt;/a&gt;
&lt;nav class="menu-side"&gt;
This is a side menu
&lt;/nav&gt;
&lt;/header&gt;

&lt;br /&gt;


&lt;center&gt;Content here
&lt;/center&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt; 
(function() {
           var body = $('body');
           $('.menu-toggle').bind('click', function() {
                body.toggleClass('menu-open');
                return false;
                });
          })();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>css:</p>

<pre><code>.menu {
    overflow-x:hidden;
    position: relative;
    left: 0px;
}

.menu-open {
    left: 231px;

}

.menu-open .menu-side {
    left: 0;
}

.menu-side,
.menu {
    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    transition: left 0.2s ease;

}

.menu-side {
    background-color:#333;
    border-right:1px solid #000;
    color:#fff;
    position:fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;


}
</code></pre>

<p>What can I do so that I don't need to re-click the menu icon but can simply click off the navbar to close it? </p>

<p>Thank you!</p>