Estou tentando fazer esse script que feche o MENU quando clico em qualquer área do main
.
O MENU abre a esquerda da página mobile.
Mas como vocês podem ver o MENU está fora do main
. Então não consegui fazer aquele código com closest
verificando se algum elemento PAI possui a class menu-in
.
// Abre o Menu Mobile
$('.open-menu-mobile').on('tap click', function(){
$('main, nav.menu').addClass('menu-in');
});
nav.menu{
position: absolute;
width: 240px;
background-color: #37474f;
height: 100%;
z-index: 1;
opacity: 0;
left: -240px;
transition: all 0.3s ease;
&.menu-in{
transform: translateX(100%);
opacity: 1;
}
}
{{-- MENU --}}
<nav class="menu">
<div class="search">
Procurar
</div>
<ul>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Produtos</a></li>
<li class="logo"><a href="#"></a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Onde Estamos</a></li>
</ul>
</nav>
{{-- MAIN --}}
<main>
{{--- Cabeçalho do Site Mobile --}}
<header id="header">
{!! Html::image('img/open-menu-mobile.png', 'Abrir Menu Mobile', ['class'=>'open-menu-mobile']) !!}
<a href="{!! URL::to('/') !!}">
</a>
</header>
@yield('content')
</main>
Pessoal, dei uma mexida nesse código e agora está funcionando quase do jeito que preciso.
// Abre o Menu Mobile
$('.open-menu-mobile').on('tap click', function(e){
$('main, nav.menu').stop(true, true).addClass('menu-in');
e.stopPropagation();
});
// Clicar em alguma área do site e fechar MENU
$(document).on('tap click', function(e){
if(!$(this).hasClass('.open-menu-mobile'))
$("main, nav.menu").removeClass('menu-in');
});
O que acontece agora é o seguinte:
Dentro do meu MENU, tenho LINKS e um campo de Busca. Quando clico nesses lugares, o MENU fecha também. Achei que usando o stopPropagation()
resolveria isso.
closest
? Não pode procurar por ela diretamente?$(".menu-in")
? – user3603 29/07/15 às 0:19