How to create collapsible navigation menu in angularJS apps?

Question

I am very new to AngularJS and have a menu such as Home/Customer/Account/Other using the bootstrap navbar component such as

 <div class="navbar navbar-default navbar-inner navbar-inverse">  

            <div class="navbar-header">

                <button type="button"

                        class="navbar-toggle"

                        data-toggle="collapse"

                        data-target=".navbar-collapse">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

    <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">
                    <li data-ng-class="{'active':highlight('/home')}"
                        style="margin-left:1px;">
                        <a href="home">Home</a>
                    </li>
            <li data-ng-class="{'active':highlight('/customer')}" style="margin-left:1px;">
                        <a href="customer">Customer</a>
                    </li>
               </ul>
    </div>
</div>

Once I shrink the window, I get to see the sandwich button. Now, If I click say, Customer menu,I would like to collapse the menu.

How can I do that? Please help me out.

Sai Manoj · Accepted Answer · 2018-09-25 05:53:17Z

2

$(document).ready(function () {
    $("nav").find("li").on("click", "a", function () {
        $('.navbar-collapse.in').collapse('hide');
    });
});

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand">Brand</a>

        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a>

                </li>
                <li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2 (with data-toggle attribute)</a>

                </li>
                <li><a href="#sectionC">Page3 (without data attributes, just jQuery)</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

I'm assuming that you are looking to close your collapsible nav menu when you click any item in the menu. If that's the thing which you are looking for then try this one as you are using bootstrap

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
<a class="nav-item nav-link" href="#">Menu Item </a>
</div>

Bootstrap4

<li>
 <a href="#" data-toggle="collapse" data-target=".navbar- 
 collapse.show">Products</a>
</li>

Using jQuery for bootstrap4

$(document).on('click','.navbar-collapse.show',function(e) {
 $(this).collapse('hide');
});

edited Sep 25, 2018 at 5:53

answered Sep 25, 2018 at 3:16

Sai Manoj

3,8591 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alomoni Over a year ago

I have tried and appears to be not working. Could you rearrange my code to display the coding? Maybe, I am missing some syntax.

Sai Manoj Over a year ago

Please have a look at the above snippet

Alomoni Over a year ago

Thank you so much. I have made changes in my apps to apply your code and it is working great. You have saved my day. I really appreciate your help.

Collectives™ on Stack Overflow

How to create collapsible navigation menu in angularJS apps?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related