CODEWITHSUNDEEP
twitter-bootstrapangularjs
Carl R
Carl R

Reputation: 8214

Collapse navbar on navigate (link click) in mobile mode

I'm using bootstrap 3 with angular. When I click a link the page isn't reloaded, causing the menu to stay open when in mobile mode.

How do I make the menu close automatically when I click a menu item?

I have tried just adding data-toggle="collapse" data-target=".navbar-responsive-collapse" to the a tags, but it causes strange behavior in desktop mode.

Upvotes: 4

Views: 4247

Answers (5)

Jamie Czerwinski
Jamie Czerwinski

Reputation: 25

If you want your navbar to collapse after the next click, no matter where on screen it occurs:

  1. Make your .navbar-toggle button only open the nav:

    <div class="navbar-header">
    <button class="navbar-toggle" ng-click="collapsed = true">
</div>

  2. Append .navbar-collapse with an invisible full-screen underlay that, when clicked, closes the nav:

    .invisible-underlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

<div class="navbar-collapse" collapse="navbarCollapsed" ng-click="navbarCollapsed = true">
    <div class="invisible-underlay"></div>
    <ul class="nav navbar-nav navbar-right">
        <li><a ui-sref="home">Home</a></li>
    </ul>
</div>

Upvotes: 1

Courtois Olivier
Courtois Olivier

Reputation: 43

this code works with dropdown sebmenu in nav bar

angular.module('app').directive('navCollapse', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var visible = false;

            element.on('show.bs.collapse', function () {
                visible = true;
            });

            element.on("hide.bs.collapse", function () {
                visible = false;
            });

            element.on('click', function (event) {
                if (visible && 'auto' == element.css('overflow-y') && $(event.target).attr('data-toggle')!="dropdown") {
                    element.collapse('hide');
                }
            });
        }
    };
});

Upvotes: 0

Fizer Khan
Fizer Khan

Reputation: 92875

This is just updated version of previous answer

angular.module('app').directive('navCollapse', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var visible = false;

            element.on('show.bs.collapse', function () {
                visible = true;
            });

            element.on("hide.bs.collapse", function () {
                visible = false;
            });

            element.on('click', function(event) {
                if (visible && 'auto' == element.css('overflow-y')) {
                    element.collapse('hide');
                }
            });
        }
    };
});

HTML

    <div class="collapse navbar-collapse navbar-app-collapse" nav-collapse="">
        <ul class="nav navbar-nav">

        </ul>
    </div>

Upvotes: 7

Carl R
Carl R

Reputation: 8214

Here's the angular directive I ended up using. There's a couple of things to watch out for.

  • Don't collapse the menu when in desktop mode (look for overflow-y == auto)
  • Handle menu state when resizing window with an open menu that closes when the window grows.

I use the ic-nav-autoclose directive on the element with the nav class.

angular.module('incmn')
    .directive('icNavAutoclose', function () {
        console.log("icNavAutoclose");
        return function (scope, elm, attrs) {
            var collapsible = $(elm).find(".navbar-collapse");
            var visible = false;

            collapsible.on("show.bs.collapse", function () {
                visible = true;
            });

            collapsible.on("hide.bs.collapse", function () {
                visible = false;
            });

            $(elm).find("a").each(function (index, element) {
                $(element).click(function (e) {
                    if (visible && "auto" == collapsible.css("overflow-y")) {
                        collapsible.collapse("hide");
                    }
                });
            });
        }
    });

Upvotes: 4

Jeyarathnem Jeyachanthuru
Jeyarathnem Jeyachanthuru

Reputation: 1189

I have done like this.

$(selector).click(function () {
  //for close, opened dropdown.
  if ($("nav").hasClass("in")) {
    $('[data-toggle="collapse"]').click();
  }
});

Upvotes: 2

Related Questions