2

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>

4
  • Acho que da para fazer isso com radio button, e apenas CSS e HTML se quiser eu posto um exemplo simples
    – hugocsl
    Commented 13/03/2018 às 16:03
  • gostaria sim, por favor!! Commented 13/03/2018 às 16:05
  • Jovem consegui resolver com 3 linhas de JS e com CheckBox pra fica melhor. Mas como falei é um exemplo simples, se ainda quiser eu posto o resultado apena como referência caso queira estudar e ver a técnica, até pq o Dvd já deu a resposta exata!
    – hugocsl
    Commented 13/03/2018 às 19:07
  • Hugo, aceito com certeza! quanto mais eu souber melhor, muito obrigado!! Commented 13/03/2018 às 22:18

2 Respostas 2

1

Gustavo como falei nos comentário vou te dar exemplo apenas como referência.

O JavaScript tem os créditos do @Isac que usou nessa Resposta, (ele apenas não deixa vc marcar mais de um CheckBox ao mesmo tempo, então se vc marca um ele desmarca o outro. Eu ia fazer isso com o Radio Button, mas não daria certo pq um dos Menus sempre ficaria aberto e não teria como fechar, por isso usei esse Script com CheckBox)

Como falei é um exemplo simples, apenas para fins didáticos., mas não usa jQuery e não tem quase nada de CSS

const boxes = document.querySelectorAll(".ok");
boxes.forEach(boxClick => boxClick.addEventListener("click",function(){
[...boxes].filter(box => box != this).forEach(box => box.checked = false);
}));
[type="checkbox"] {
    display: none;
}
[type="checkbox"]:checked + label {
    background-color: red;
}
.menu-categoria, .menu-mobile {
    position: absolute;
    height: 0px;
    opacity: 0;
    overflow: hidden;
    transition: all 300ms ease-in-out;
}
label {
    cursor: pointer;
    padding: 10px 14px;
    background-color: black;
    transition: background-color 250ms ease-in-out;
    color: #ffffff;
}
input[id="cate"]:checked ~ .menu-categoria {
    height: 150px;
    opacity: 1;

}
input[id="car"]:checked ~ .menu-mobile {
    height: 150px;
    opacity: 1;
}
<nav>
    <input type="checkbox" name="menu" id="cate" class="ok">
    <label for="cate">Categorias</label>
    <input type="checkbox" name="menu" id="car" class="ok">
    <label for="car">Carros</label>
   
    <div class="menu-categoria">
        <ul class="menu-categoria-mobile" id="menu1">
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</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>

</nav>

2
  • Hugo, muito obrigado mesmo por essa resposta, essa é uma possibilidade que eu jamais pensaria. Commented 20/03/2018 às 16:56
  • De boa, é que eu não entendo muito de JS, então sempre tento resolver as coisas primeiro com CSS puro xD. []´s
    – hugocsl
    Commented 20/03/2018 às 17:13
0

Inclua um if verificando se o outro possui a classe que indica que está aberto e faça um trigger click nele caso esteja aberto:

$(document).ready(function(){
        // ANIMAÇÃO MENU MOBILE
        $(".menuIcon").click(function () {

            if($(".toggle-categoria").hasClass("showCategoria")) $(".toggle-categoria").trigger("click");

            $(".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 () {

            if($(".menuIcon").hasClass("showMenu")) $(".menuIcon").trigger("click");

            $(".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>

2
  • Muito Obrigado cara!!! funcionou perfeitamente! não conhecia essas funções, irei estudar mais!!! Commented 13/03/2018 às 16:21
  • Falo cara! Dá uma estudada que é útil as vezes.
    – Sam
    Commented 13/03/2018 às 16:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .