Click on page area and close MENU

Asked

Viewed 209 times

1

I’m trying to make this script that closes the MENU when I click on any area of main.

The MENU opens the left of the mobile page. But as you can see MENU is out of the main. So I couldn’t make that code with closest by checking if any PAI element has the 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>

Guys, I tweaked this code and now it’s working almost the way I need it.

    // 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');
    });

What happens now is this:

Inside my MENU, have LINKS and a Search field. When I click on these places, the MENU closes too. I thought using the stopPropagation() would solve this.

jquery

  • If you already know the name of the class and I believe that it is unique, because you need to use the closest? You can’t look for her directly? $(".menu-in")?

  • It is not unique. See function, jQuery. I apply it in two places.

1 answer

1


I got.

    // Clicar em alguma área do site e fechar MENU
    $('body').on('tap click', function(e){
        if(e.target !== $('nav.menu')[0] && $(e.target).closest('nav.menu').attr('class') != 'menu menu-in')
            $("main, nav.menu").removeClass('menu-in');
    });

I used the closest to check if the parent element class is different from the parent I am clicking from. If yes, close the MENU.

So when I click on a child of the parent element, it doesn’t close the MENU, whereas the class of its parent element is = to what I determined in the condition.

Browser other questions tagged jquery

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