Good afternoon, I'm making a website that has a side website by clicking on the button the menu comes up on the right side of the screen, and I need it to close when it is clicked anywhere other than the menu so it can close, how can I do this ... I looked on the internet but I could not understand very well ... could anyone help me?
html code:
<div class="menu" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 todo menu-aberto">
<div onclick="fechar();" class="xis"><i class="fa fa-times fa-2x" aria-hidden="true"></i></div>
<a class="" href="#">
<img alt="Brand" src="images/logo-menu/perfil.jpg" class="logo-avatar">
</a>
<span>Usúario da Silva </span>
<a href="#" class="hidden-xs hidden-sm">Sair</a>
</div>
<div class="aberto-1">
<ul>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li>
<li>Teste</li>
</ul>
</div>
</div>
<section>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-5 col-md-4 hidden-sm hidden-xs pull-left alinhamento-menu text-center">
<a href="#">
<span>Agenda completa</span>
</a>
<a href="#">
<span>Fale Conosco</span>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-9 col-xs-6 text-center logo-flutuante center-block">
<img alt="Brand" src="images/logo-menu/placa2.jpg" class="img-responsive logao center-block">
</div>
<div class="col-lg-5 col-md-5 col-sm-3 col-xs-6 pull-right nav-aparecer">
<div class="pull-left">
<i class="fa fa-bars fa-2x menu-ativ" onclick="active();" aria-hidden="true"><span class="titulo-menu-btn hidden-xs hidden-sm">Menu</span></i>
</div>
<a class="" href="#">
<img alt="Brand" src="images/logo-menu/perfil.jpg" class="logo-avatar">
</a>
<a href="#" class="item1 hidden-xs hidden-sm">
<span class="users">Usúario da Silva </span>
</a>
<a href="#" class="hidden-xs hidden-sm sair">Sair</a>
</div>
</div>
</div>
</nav>
</section>
css:
/*menu*/
.aberto-1{
background-color: #e5e5e5;
color: #fff;
width: 23em;
right: 0;
top: 0;
position: fixed;
float: right;
z-index: 999;
margin-top: 55px;
border-radius: 0 0 5px 5px;
height: 100%;
ul{
list-style: none;
line-height: 2em;
li{
font-size: 18px;
}
}
}
.menu-aberto{
float: right;
position: fixed;
top: 0;
right: 0;
z-index: 999999999;
background-color: $rosa-padrao;
color: #fff;
border: 1px solid transparent;
border-radius: 0 0 3px 3px;
width: 23em;
.xis{
float: left;
margin-right: 20px;
z-index: 99999999999;
margin-top: 10px;
}
.item1-aberto, .titulo-menu-btn-aberto, a, span{
margin: 0 6px;
padding: 0px;
color: #fff;
}
}
span{
padding: 10px 15px;
position: relative;
display: inline-table;
color: $cinza-claro;
}
a{
color: $cinza-claro;
}
.navbar-default {
background-color: rgba(248, 248, 248, 0);
border-bottom: 1px solid $rosa-padrao;
}
.alinhamento-menu{
padding: 18px 0 0;
}
.logo-avatar{
margin-left: 10px;
padding: 5px 0;
}
.users{
color: $cinza-claro;
font-weight: bold;
}
.sair{
text-decoration: underline;
}
.item1{
padding-top: 8px;
display: -webkit-inline-box;
}
.logo-flutuante{
position: relative;
height: 0px;
padding-bottom: 5em;
/*z-index: 99999999999; */
}
.nav-aparecer{
margin-top: 8px;
}
/*fim menu*/
Jquery:
$(document).ready(function(){
$('#menu').hide();
$('.nav-aparecer').show();
$('.logao').show();
$('body').click(function(e){
//Essa condição verifica se o clique foi diretamente na sua div
if(e.target.id == "#menu")
return;
//Essa condição verifica se o clique foi feito em algum elemento dentro da sua div
if($(e.target).closest('#menu').length)
return;
$('#menu').hide("slow");
$('.nav-aparecer').show("slow");
$('.logao').show("slow");
});
});
function active(){
$('#menu').show("slow");
$('.nav-aparecer').hide("slow");
$('.logao').hide("slow");
}
How can I do this? ie opened the menu by clicking outside the menu it closes ... Thanks guys.