Get Responsive navbar menu to Automatically close after anchor link clicked

Get Responsive navbar menu to Automatically close after anchor link clicked

In this Post We Will Explain About is Bootstrap Mobile navbar toggle collapse after click, With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to How to hide my collapse bootstrap 3 navbar ExampleExample

In this post we will show you Best way to implement javascript – Bootstrap close responsive menu “on click”, hear for Responsive navbar collapse for single page applicationswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :  Get all checked Checkbox Values in AngularJS

Markup Languages(index.html) HTML Part

<nav class="navbar">
    <div class="container">
     <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle pull-right collapsed" type="button">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
      </button>
      <div class="logo pull-left">
       <a href="index.html" class="navbar-brand main_logo">
        <img class="img-responsive" src="images/logo-main.png" alt="logo-main" />
       </a>
       <a href="index.html" class="navbar-brand min-logo">
        <img class="img-responsive" src="images/logo-mini.png" alt="logo-mini" />
       </a>
      </div>
     </div>
     <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
       <li>
        <a href="#service">Information</a>
       </li>
       <li>
        <a href="#blog">Invest</a>
       </li>
       <li>
        <a href="#contact">Contact Us</a>
       </li>
       <li>
        <a href="javascript:;" onclick="document.getElementById('level00s').style.display='block'">Login / Register</a>
       </li>
      </ul>
     </div>
    </div>
   </nav>

Example 1 : javascript – How to close an open collapsed navbar when clicking

jQuery('.nav a').on('click', function(){
 jQuery('.navbar-collapse').removeClass("in");     
});

Example 2 : jquery – Hide Twitter Bootstrap nav collapse on click

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x by Richard
});

Also Read :  AngularJS Parsing JSON data RESTful JSON Parsing

Example 3 : Responsive navbar collapse for single page applications

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

Example

I hope you have Got What is Responsive navbar collapse for single page applications And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *