Creating Collapsible Bootstrap Navbars With jQuery - Responsive-collapse.js
File Size: | 7.26 KB |
---|---|
Views Total: | 29661 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Responsive-collapse.js is a jQuery plugin that automatically hides overflowing Bootstrap navbar items and shows them into a dropdown list on small screens.
How to use it:
1. Make sure you first have jQuery library and Bootstrap framework are loaded correctly in your html document.
<!-- jQuery --> <script src="//code.jquery.com/jquery.min.js"></script> <!-- Bootstrap --> <link href="bootstrap.min.css" rel="stylesheet"> <script src="bootstrap.min.js"></script>
2. Load the jquery.responsive-collapse.css
and jquery.responsive-collapse.js
files in the document:
<link href="jquery.responsive-collapse.css" rel="stylesheet"> <script src="jquery.responsive-collapse.js"></script>
3. Create a Bootstrap navbar as follow:
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="navbar-brand">WebSite Logo</a> </div> <div class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item 3 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Item 3.1</a></li> <li><a href="#">Item 3.2</a></li> <li><a href="#">Item 3.3</a></li> <li><a href="#">Item 3.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item 5 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Item 5.1</a></li> <li><a href="#">Item 5.2</a></li> <li><a href="#">Item 5.3</a></li> <li><a href="#">Item 5.4</a></li> </ul> </li> <li><a href="#">Item 6</a></li> <li><a href="#">Item 7</a></li> <li><a href="#">Item 8</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Profile</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div> </div> </div>
4. Call the function on the navbar list and done.
$('ul.navbar-nav').responsiveCollapse();
5. Specify the breakpoint at which screen size the overflowing nav items auto collapse into a dropdown list.
$('ul.navbar-nav').responsiveCollapse({ breakPoint: 768 });
6. Customize the text for the dropdown list.
$('ul.navbar-nav').responsiveCollapse({ overflowItemText: '<i class="fa fa-bars"></i> More <b class="caret"></b>' });
Changelog:
2018-12-20
- Fix width calculations when navbar-header not present
2017-11-22
- Changed size() to length
This awesome jQuery plugin is developed by psyon. For more Advanced Usages, please check the demo page or visit the official website.