How to close responsive menu, click outside of nav

Question

Hello my problem is that i have a menu a responsive menu with bootstrap i want to close menu on responsive view on desktop its fine but on responsive view i want that when i click outside the nav menu on any area it should be close, my nav code is following

<!-- Navigation -->

<nav id="navigation-sticky" class="white-nav b-shadow">

    <!-- Navigation Inner -->

    <div class="nav-inner">

        <div class="logo">

            <!-- Navigation Logo Link -->

            <a href="#home" class="scroll">

                <!-- Your Logo -->

                <img src="" class="site_logo" alt=""/><br>

               </a>

        </div>

        <!-- Mobile Menu Button -->

        <a  class="mobile-nav-button colored"><i class="fa fa-bars"></i></a>

        <!-- Navigation Menu -->

        <div class="nav-menu clearfix ">

            <ul class="nav uppercase oswald">

                <li><a href="#home" class="scroll">home</a></li>

                <li class="dropdown-toggle nav-toggle" ><span href="#about" class="scroll">About App<b data-toggle="dropdown"></b></span>

                    <!-- DropDown Menu -->

                    <ul class="dropdown-menu uppercase gray-border clearfix">                       

                        <li><a href="#works" class="scroll">HOW DOES IT WORK?</a></li>
                        <li><a href="#features" class="scroll">Features</a></li>                        
                        <li><a href="#what-we-do" class="scroll">APP FLOW</a></li>
                        <li><a href="#faq" class="scroll">F.A.Q</a></li>

                    </ul>

                    <!-- End DropDown Menu -->

                </li>



                <li><a href="#portfolio" class="scroll">Service Types</a></li>

                <li><a href="#skills" class="scroll">Cities</a></li>

                <li><a href="#prices" class="scroll">Rates</a>

                </li>

                <li><a href="#download" class="scroll">Download</a></li>



                <li class="dropdown-toggle nav-toggle" ><span aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle scroll">Become a Driver</span>

                    <!-- DropDown Menu -->

                    <ul class="dropdown-menu uppercase gray-border clearfix">                       

                        <li><a href="#" class="scroll">Signup</a></li>
                        <li><a href="#" class="scroll">Flyer</a></li>                       


                    </ul>

                    <!-- End DropDown Menu -->

                </li>

                                    <li><a href="#" class="scroll">login</a></li>

                <li><a href="#contact" class="scroll">contact</a></li>

            </ul>

        </div><!-- End Navigation Menu -->

    </div><!-- End Navigation Inner -->

</nav><!-- End Navigation -->

i use this script to close menu it close menu but menu open by double click not on single click

$('html').click(function() {
 $('#menu').hide(); 
});

it using many other scripts lil bit difficult to show snippet, can i give you my website link ? — Dami, Nov 11 '15 at 06:52
[Here](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) is a similar question. You may check it (y) — Irshad, Nov 11 '15 at 07:24

divy3993 · Answer 1 · 2015-11-11T13:58:41.907

3

I think this might work for you:

$(document).mouseup(function (e)
{
    var container = $(".nav-menu");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.css("display","none");
    }
});

Updated: Try this

var container = $(".nav-inner div.nav-menu, .mobile-nav-button");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".nav-inner div.nav-menu").slideUp();
    }

edited Nov 11 '15 at 13:58

answered Nov 11 '15 at 07:06

divy3993

5,732
2
28
41

your menu hide code not work on chrome responsive view, is it ok on android or ios devices actually currently my both devices is damaged so i am't able to check on devices – Dami Nov 11 '15 at 07:23
Was it working proper before the code i gave? I am talking about ***become a driver*** – divy3993 Nov 11 '15 at 07:23
Could you post the code live on your web so i can check it out. – divy3993 Nov 11 '15 at 07:24
no i mean your menu hide code, it hide menu on firefox responsive view but on chrome responsive not hide menu work like as previous your code – Dami Nov 11 '15 at 07:25
Could you update your website? With the code i gave. – divy3993 Nov 11 '15 at 07:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/94783/discussion-between-divy3993-and-dami). – divy3993 Nov 11 '15 at 07:36
are you there ? you not reply on chat – Dami Nov 11 '15 at 08:16

score 1 · Answer 2 · answered Nov 11 '15 at 07:31

1

I think this is what you are looking for:

$('html').click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

answered Nov 11 '15 at 07:31

Irshad

222
4
17

The potential problem here is that is may stop events you still want to have happen within the menu container... right? That's what's happening for me. – Jenn Jan 31 '22 at 17:58

score 0 · Answer 3 · answered Nov 11 '15 at 06:54

0

Try this:

$( "#menu" ).toggle( "slide" );

answered Nov 11 '15 at 06:54

Santhosh

89
1
3

How to close responsive menu, click outside of nav

3 Answers3