Добрый день, есть меню которое открывается и закрывается при нажатии на кнопку. Хотелось бы чтобы оно закрывалось также при нажатии на любую область вне зоны этого меню. Может кто-то подскажет
$(document).ready(function(){
$(".button-nav-toggle").click(function(){
$(".main").toggleClass("open");
$(".menu").toggleClass("open");
});
});
<button class="button-nav-toggle "><a href="#">Меню</a></button>
<div class="menu">
<nav class="nav-main">
<div class="nav-container">
<ul>
<li> <a href="#">Компания</a>
<ul>
<li><a href="">О компании</a></li>
<li><a href="">История</a></li>
<li><a href="">Новости</a></li>
<li><a href="">Медиа</a></li>
<li><a href="">Реквизиты</a></li>
<li><a href="">Вакансии</a></li>
<li><a href="">Честная позиция</a></li>
</ul>
</li>
<ul>
<li><a href="#" class="back">Назад</a></li>
<li><a href="">Об отделе продаж</a></li>
<li><a href="#">Производители</a></li>
<li><a href="">Акции</a></li>
<li><a href="">Новинки ассортимента </a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
.button-nav-toggle {
font-size: 1.5em;
float: right;
border: 0;
background: 0 0;
color: #000;
outline: 0;
cursor: pointer
}
.nav-main {
transition: right .25s ease-in-out;
background: #2d338e;
position: fixed;
overflow-x: hidden;
width: 280px;
right: -280px;
top: 0;
bottom: 0;
z-index:50000;
}
.nav-main .nav-container {
transition: left .25s ease-in-out;
position: relative;
left: 0
}
.nav-main .nav-container.show-sub { left: -280px }
.nav-main .nav-container ul {
margin: 0;
padding: 0 20px
}
.nav-main .nav-container ul li {
list-style: none;
border-bottom: 0px solid #d5d7da
}
.nav-main .nav-container ul li a {
text-decoration: none;
display: block;
padding: 20px 0;
color: #c0c2dd;
font-size: 16px
}
.nav-main .nav-container ul li a:hover { color: #ffffff; }
.nav-main .nav-container ul li ul {
display: none;
width: 280px;
position: absolute;
right: -280px;
top: 0
}
.nav-main .nav-container ul li ul li { border-bottom: 0px solid #d5d7da;padding-top: 7px; }
.nav-main .nav-container ul li ul li.nav-label {
border-top: 1px solid #d5d7da;
padding: 25px 0 10px
}
.nav-main .nav-container ul li ul li a {
padding: 7px 0 15px;
font-size: 14px
}
.nav-main .nav-container ul li ul li a.back {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
padding: 20px 25px;
background: url(arrow-left.png) left center no-repeat
}
.nav-main .nav-container ul li.has-sub-nav a { background: url(arrow-right.png) right center no-repeat }
.nav-main .nav-container ul li.has-sub-nav ul a { background: 0 0 }
.nav-main .nav-container ul li.active ul { display: block }
.open .nav-main { right: 0 }