To close the responsive menu, simply click anywhere outside of the navigation bar

Question

To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code:

<!-- 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 -->

Although the script I'm using successfully closes the menu, I'm encountering an issue where double-clicking is required instead of single-clicking to open the menu.

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

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Here is a possible solution for you:

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

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

Update: Give this a try instead

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

if (!container.is(e.target) // check if the click target is not the container...
    && container.has(e.target).length === 0) // ...or a descendant of the container
{
    $(".nav-inner div.nav-menu").slideUp(); // slide up the menu
}

Answer 2

Here is a possible solution for you:

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

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

Update: Give this a try instead

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

if (!container.is(e.target) // check if the click target is not the container...
    && container.has(e.target).length === 0) // ...or a descendant of the container
{
    $(".nav-inner div.nav-menu").slideUp(); // slide up the menu
}

Answer 3

Answer №2

Here is the solution you've been searching for:

$('body').click(function() {
//Hide the menu if it's visible
});

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

Answer 4

Here is the solution you've been searching for:

$('body').click(function() {
//Hide the menu if it's visible
});

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

Answer 5

Answer №3

You can give this a shot:

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

Answer 6

You can give this a shot:

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

To close the responsive menu, simply click anywhere outside of the navigation bar

Answer №1

Answer №2

Answer №3

Similar questions

The Uglify task in Grunt/NPM is having trouble with this particular line of JavaScript code

Utilize a singular object to contain multiple instances of the useState hook

Transferring a zipped file from the backend of SailsJS to the frontend of React Redux via

I am looking to create an extension that can automatically paste text from a variety of lists, but unfortunately, I am struggling to get it up and running correctly

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

Is Firebase the Answer to Shopify's Authentication Validation?

Is there an issue with retrieving data from asp.cs through ajax?

The native javascript modal fails to appear

What is the best way to trigger the keyup event in that moment?

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

AngularJSError

Troubleshooting: Images not displaying properly in React due to Webpack configuration bottleneck,

Continuous polling with Ajax in Rails does not trigger the display of an alert box

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

What is the best way to access a custom object in JavaScript that was created in a different function?

"Troubleshooting: My PHP script is not displaying CKEditor content stored in the database as HTML –

Strategies for resolving the error "Cast to ObjectId failed for value"

The process of embedding variables within a JSON Array function in JavaScript

An error was encountered: "Uncaught SyntaxError: Unable to utilize import statement outside of a module in

Refreshing Angular Page