Boa Tarde a todos!
Eu fiz uma estrutura onde no mobile preciso mostrar 2 menu's, porém ao clicar em um preciso que o outro feche e não estou conseguindo fazer isso, atualmente só consigo abrir e fechar se clicar no mesmo, poderiam me ajudar?
Desde já muito obrigado!
$(document).ready(function(){
// ANIMAÇÃO MENU MOBILE
$(".menuIcon").click(function () {
$(".menu-mobile").toggle(500);
$(this).toggleClass('showMenu');
});
$(".menu-mobile li").click(function () {
$(".menu-mobile").toggle(500);
$(".menuIcon").removeClass('showMenu');
console.log('entrou');
});
/*************************************************/
/*************************************************/
// ANIMAÇÃO MENU CATEGORIA
$(".toggle-categoria").click(function () {
$(".menu-categoria").toggle(500);
$(this).toggleClass('showCategoria');
});
$(".menu-categoria li").click(function () {
$(".menu-categoria").toggle(500);
$(".toggle-categoria").removeClass('showCategoria');
console.log('entrou');
});
});
/***** nav mobile *****/
.nav-mobile{
display: block;
top: 0;
width: 100%;
max-height: 80px;
position: fixed;
z-index: 99;
background: #141314;
}
.nav-mobile .toggle{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.nav-mobile .toggle .logo-mobile{
width: 60px;
}
.toggle .logo-mobile a img{
width: 100%;
}
.nav-mobile .toggle .menu-hb{
float: right;
width: 60px;
height: 78px;
background: transparent;
}
.toggle .toggle-categoria p{
color: #fff;
cursor: pointer;
}
.toggle .menu-hb .menuIcon{
position: relative;
top: 15px;
cursor: pointer;
text-align: center;
height: 100%;
}
.menu-hb .menuIcon .top, .middle, .bottom{
left: 0;
right: 0;
margin: 0 auto;
height: 4px;
width: 30px;
position: absolute;
border-radius: 15px;
background: rgb(146, 123, 71);;
transition: all 400ms ease 0;
-moz-transition: all 400ms ease 0;
-webkit-transition: all 400ms ease 0;
-ms-transition: all 400ms ease 0;
-o-transition: all 400ms ease 0;
}
.menu-hb .menuIcon .top{
top: 13px;
}
.menu-hb .menuIcon .middle{
top: 21px;
}
.menu-hb .menuIcon .bottom{
top: 29px;
}
.menu-hb .showMenu .top{
background: rgb(146, 123, 71);
top: 21px;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.menu-hb .showMenu .middle{
opacity: 0;
}
.menu-hb .showMenu .bottom{
background: rgb(146, 123, 71);
top: 21px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.nav-mobile .menu-mobile,
.nav-mobile .menu-categoria{
display: none;
padding: 0 0 15px;
background: #141314;
width: 100%;
height: 100%;
z-index: 99999;
right: 0;
top: 79px;
position: fixed;
overflow: auto;
}
.nav-mobile .menu-mobile .menu-dinamico-mobile,
.nav-mobile .menu-categoria .menu-categoria-mobile{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
overflow: auto;
padding-left: 0;
}
.menu-dinamico-mobile li,
.menu-categoria-mobile li{
padding: 20px 0;
display: block;
text-align: center;
width: 100%;
}
.menu-dinamico-mobile a{
color: rgb(146, 123, 71);
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}
.menu-categoria-mobile a{
color: #fff;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar nav-mobile">
<div class="header-container">
<div class="toggle">
<div class="logo-mobile">
</div>
<div class="toggle-categoria">
<p>+ produtos</p>
</div>
<div class="menu-hb">
<div class="menuIcon">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
</div>
<div class="menu-categoria">
<ul class="menu-categoria-mobile" id="menu1">
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
</ul>
</div>
<div class="menu-mobile">
<ul class="menu-dinamico-mobile" id="menu2">
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
<li><a href="">carros</a></li>
</ul>
</div>
</div>
</nav>