Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap mobile nav: hide menu after clicking menu link

I'm looking for a way to make the Twitter Bootstrap mobile/tablet nav automatically hide/collapse after clicking a menu link. I have a lot of menu items and so when users expand the menu in iPhone, they only see the menu and not the page underneath. This confuses the user when they click a menu link, making it seem like nothing has happened after click.

A huge thank you and hug to anyone who can point me in the right direction with this!

like image 693
bjornfloki Avatar asked Jun 01 '13 21:06

bjornfloki


People also ask

How do you close an open collapse navbar when clicking outside the navbar element in bootstrap 4?

Currently, the only way to open or close it is by clicking on the navbar-toggle button.

How do I make bootstrap navbar collapse?

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".

How do I make my navbar not collapse?

For navbars that never collapse, add the . navbar-expand class on the navbar. For navbars that always collapse, don't add any .


6 Answers

If you are using BS3.x you can collapse the mobile nav with markup like this - notice the “data-toggle” and “data-target” in the markup for the home link:

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li class="active">
        <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
      </li>
      <li>

You can also collapse the mobile Nav via script like this:

    <script>
      $('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
    </script>

This approach requires absolutely no extra markup. Each time a link is clicked in the nav it will toggle the navbar.

Cheers.

like image 123
user2562923 Avatar answered Sep 25 '22 06:09

user2562923


The easiest way I have found is to use the data attributes on any navbar links where collapsing of the mobile navbar is desired. Use data-target=".navbar-collapse.in" so that the navbar is only toggle in it's open state, and not every time the link is clicked.

<a href="#link" data-toggle="collapse" data-target=".navbar-collapse.in">Link</a>

http://codeply.com/go/bp/lbIb5ZaHbq

like image 38
Zim Avatar answered Sep 27 '22 06:09

Zim


The navigation should be closed any time a user clicks anywhere on the body - not just navigation elements. Say menu is open, but user clicks in the page body. User expects to see menu close.

You also have to make sure toggle button is visible, otherwise a jump is seen in menu.

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});
like image 24
Charlie Dalsass Avatar answered Sep 23 '22 06:09

Charlie Dalsass


Example markup like from the Bootstrap documentation:

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">

Close on menu item click

Add to your Javascript accordingly:

$('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
    $('#example-auto-collapse.in').collapse('hide');
}

Alternative: Close with any click

Like Charlie Dalsass suggested it might be preferable to also close the menu when clicking on the page. For that you can replace the Javascript above with the following:

$('body').click(function(e) {
    // don't close when opening a sub-menu in our menu
    if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
        $('#example-auto-collapse.in').collapse('hide');
    }
}

Even cleaner imo would be to bind and unbind this handler when the menu opens/closes and avoid running the handler in vain on every single click the user makes. It's very unlikely to have any noticeable impact though.


I created a stack exchange account just to upvote the answer by Skelly for it's simplicity. Then I found out how one can't upvote without reputation. Then I found out how that solution breaks ScrollSpy. Now this is the solution that works best for me without unwanted side effects.

like image 38
Arsylum Avatar answered Sep 26 '22 06:09

Arsylum


In case anyone else is interested, I found a solution elsewhere. It's beautifully simple.

Add this id to your markup:

<nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">

And add this to your JS:

$('#hideonclick a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                if ($('.btn').is(":visible"))
                    $('.btn').click();
            });
like image 35
bjornfloki Avatar answered Sep 24 '22 06:09

bjornfloki


If you are using sub menu, you have to modify @user2562923's code as follow :

        $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });
like image 42
Eranda Avatar answered Sep 25 '22 06:09

Eranda