August 15, 2014

How to make the menu collapse when it is clicked in mobile view in Bootstrap 3?

How to make the menu collapse when it is clicked in mobile view in Bootstrap 3?

By default menu doesn't close when you select from a menu in a mobile view. It still stays when the menu is clicked and the page loads. I was trying my blog in my mobile. Then i found the solution for it. We can either use jQuery or directly use html codes. I will teach you both the ways.

HTML

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" ><a>Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Using html:

Add data-target='.navbar-collapse' data-toggle='collapse' to <li> tag.

For example:
<li class="active" data-target='.navbar-collapse' data-toggle='collapse'><a href="#">Link</a></li>
<li data-target='.navbar-collapse' data-toggle='collapse'><a href="#">Link</a></li>

Using JQuery:

Simply add this jQuery code along with the html code.

$('.navbar-collapse a').click(function (e) {
    if($('.navbar-toggle').css('display') == 'block' && !$(this).siblings().length){
        $('.navbar-collapse').collapse('toggle');
    }
});

Output

See the Pen How to make the menu collapse when it is clicked in mobile view in Bootstrap 3? by Vivin Antony (@vivinantony) on CodePen.

Attachments

I have used external attachments.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Note:

Try this out in mobile view to know the solution.

No comments:

Post a Comment

Popular Posts

Views