javascript - Pop out navigation menu to close when click any blank part of page -

my current project has navigation menu has floating toggle on top left, , when toggled menu pops out on left hand side of page. menu auto closes when link clicked, if #menutoggle clicked again, or there menuclose button [x] @ top right of menu. add ability close menu clicking anywhere outside menu - or blank part of page. i'm sure simple addition current script - , i've tried few things without success. coming right code appreciated!

//javascript  // menu settings    ;(function(){  $('#menutoggle, .menu-close').on('click', function(){  $('#menutoggle').toggleclass('active');  $('body').toggleclass('body-push-toleft');  $('#themenu').toggleclass('menu-open');  });  $('.smoothscroll').on('click',function(){  $('#menutoggle').removeclass('active');  $('body').removeclass('body-push-toleft');  $('#themenu').removeclass('menu-open');  });      })(jquery)

//css  /* ==========================================================================     menu configuration     ========================================================================== */    .menu {  	position: fixed;  	right: -200px;  	width: 260px;  	height: 100%;  	top: 0;  	z-index: 10;  	text-align: left;  }    .menu.menu-open {  	right: 0px;  }    .menu-wrap {  	position: absolute;  	top: 0;  	left: 60px;  	background: #1a1a1a;  	opacity: 0.9;  	width: 200px;  	height: 100%;  }    .menu h1.logo {  	font-family: "oswald", sans-serif;  	font-size: 16px;  	font-weight: 700;  	letter-spacing: 0.15em;  	line-height: 40px;  	text-transform: uppercase;  	color: #ffffff;  	margin-top: 20px;  }    .menu h1.logo a:hover {  	color: #ffffff;  }    .menu img.logo {  	margin: 20px 0;  	max-width: 160px;  }    .menu {  	margin-left: 20px;  	color: #808080;  	display: block;  	font-size: 12px;  	font-weight: 700;  	line-height: 40px;  	letter-spacing: 0.1em;  	text-transform: uppercase;  }    .menu a:hover {  	color: #ffffff;  }    .menu a:active {  	color: #ffffff;  }    .menu > {  	float: left;  	display: inline-block;  	vertical-align: middle;   	text-align: left;  	width: 28px;  	font-size: 30px;  	line-height: 40px;  	margin: 25px 2px;  }    .menu-close {  	cursor: pointer;  	display: block;  	position: absolute;  	font-size: 14px;  	color: #808080;  	width: 40px;  	height: 40px;  	line-height: 40px;  	top: 20px;  	right: 5px;  	-webkit-transition: .1s ease-in-out;  	   -moz-transition: .1s ease-in-out;  		-ms-transition: .1s ease-in-out;  		 -o-transition: .1s ease-in-out;  			transition: .1s ease-in-out;  }    .menu-close:hover {  	color: #ffffff;  	-webkit-transition: .1s ease-in-out;  	   -moz-transition: .1s ease-in-out;  		-ms-transition: .1s ease-in-out;  		 -o-transition: .1s ease-in-out;  			transition: .1s ease-in-out;  }    /* push body after clicking menu button */  .body-push {  	overflow-x: hidden;  	position: relative;  	left: 0;  }    .body-push-toright {  	left: 200px;  }    .body-push-toleft {  	left: -200px;  }    .menu,  .body-push {  	-webkit-transition: .3s ease;  	   -moz-transition: .3s ease;  		-ms-transition: .3s ease;  		 -o-transition: .3s ease;  			transition: .3s ease;  }    #menutoggle {  	position: absolute;  	top: 20px;  	left: 0;  	z-index: 11;  	display: block;  	text-align: center;  	font-size: 14px;  	color: #ffffff;  	width: 40px;  	height: 40px;  	line-height: 40px;  	cursor: pointer;  	background: rgba(0,0,0,0.25);  	-webkit-transition: .1s ease-in-out;  	   -moz-transition: .1s ease-in-out;  		-ms-transition: .1s ease-in-out;  		 -o-transition: .1s ease-in-out;  			transition: .1s ease-in-out;  }    #menutoggle:hover {  	color: #ffffff;  	background: rgba(0,0,0,0.2);  	-webkit-transition: .1s ease-in-out;  	   -moz-transition: .1s ease-in-out;  		-ms-transition: .1s ease-in-out;  		 -o-transition: .1s ease-in-out;  			transition: .1s ease-in-out;  }

//html  <!-- menu -->  	<nav class="menu" id="themenu">  		<div class="menu-wrap">  			<h1 class="logo"><a href="index.html#home">navigate</a></h1>  			<i class="fa fa-times menu-close"></i>  			<a href="#home" class="smoothscroll">home</a>  			<a href="#about" class="smoothscroll">about</a>              <a href="#testimonials" class="smoothscroll">testimonials</a>  			<a href="#portfolio" class="smoothscroll">video samples</a>  			<a href="#services" class="smoothscroll">audio samples</a>              <a href="#bio" class="smoothscroll">work history </br>song list</a>  			<a href="#contact" class="smoothscroll">contact</a>  			<a href="tel:phone removed"><i class="fa fa-phone-square"></i></a>  			<a href="site removed" target="_blank"><i class="fa fa-facebook-square"></i></a>              <a href="mailto:email removed"><i class="fa fa-envelope"></i></a>                                      		</div>  		  		<!-- menu button -->  		<div id="menutoggle"><i class="fa fa-bars"></i></div>  	</nav>

there's popular answer on question here: how detect click outside element?

but it's important @ comments , follow article suggest better option https://css-tricks.com/dangers-stopping-event-propagation/

$(document).on('click', function(event) {     if (!$(event.target).closest('#themenu').length) {       $('#themenu').removeclass('menu-open');     } });