Jquery - Having 2 menu(hamburger), how to close one menu while the other is open?

Asked

Viewed 236 times

2

Good afternoon to all!

I made a structure where in mobile I need to show 2 menu’s, but when clicking on a precise one the other closes and I’m not able to do it, currently I can only open and close if you click on it, could help me?

Thank you very much!

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

javascript html jquery css

  • I think you can do this with radio button, and only CSS and HTML if you want I put a simple example

  • I’d like to, please!!

  • Young I managed to solve with 3 lines of JS and with Checkbox for better. But as I said is a simple example, if you still want I put the result just as reference if you want to study and see the technique, until the DVD has given the exact answer!

  • Hugo, I accept for sure! the more I know the better, thank you very much!!

2 answers

1

Gustavo as I said in the comments I will give you example only as reference.

Javascript has the @Isac credits you used on this Answer, (It just doesn’t let you score more than one Checkbox at the same time, so if you score one it unchecks the other. I was going to do this with Radio Button, but it would not work because one of the Menus would always be open and there would be no way to close, so I used this Script with Checkbox)

As I said, it’s a simple example, for educational purposes only., but does not use jQuery and has almost nothing 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>

  • Hugo, thank you so much for that answer, that’s a possibility I would never think.

  • Good, because I don’t know much about JS, so I always try to solve things first with pure CSS xD. []s

0


Include a if checking if the other has the class that indicates it is open and does a trigger click in case it is open:

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

  • Thank you very much man!!! worked perfectly! did not know these functions, I will study more!!!

  • I talk man! Gives a study that is useful sometimes.

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.