Better Bootstrap Nav jQuery - Download Mobile-friendly Bootstrap Off-canvas Nav - jQuery Better Nav

Download Mobile-friendly Bootstrap Off-canvas Nav – jQuery Better Nav

Posted on

This time I will share jQuery Plugin and tutorial about Mobile-friendly Bootstrap Off-canvas Nav – jQuery Better Nav, hope it will help you in programming stack.

Better Bootstrap Nav jQuery - Download Mobile-friendly Bootstrap Off-canvas Nav - jQuery Better Nav
File Size: 6.45 KB
Views Total: 7894
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery plugin for better Bootstrap navbar which replaces the default vertical mobile view with a sliding off-canvas menu when the viewport is narrower than a specific breakpoint.

Works with Bootstrap 4 and Bootstrap 3!

How to use it:

1. Include the style sheet bootstrap-better-nav.css after bootstrap.min.css.

1 <link rel="stylesheet" href="bootstrap.min.css">
2 <link href="dist/bootstrap-better-nav.css" rel="stylesheet">

2. Include the JavaScript file bootstrap-better-nav.js after jQuery library and bootstrap.min.js.

3 <script src="dist/bootstrap-better-nav.js"></script>

3. That’s it. The plugin will automatically wrap the nav items…

01 <nav class="navbar navbar-default">
02   <div class="container-fluid">
03     <div class="navbar-header">
04       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
05       <a class="navbar-brand" href="#">Project name</a> </div>
06     <div id="navbar" class="navbar-collapse collapse">
07       <ul class="nav navbar-nav">
08         <li class="active"><a href="#">Home</a></li>
09         <li><a href="#">About</a></li>
10         <li><a href="#">Contact</a></li>
11         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-has<a href="https://www.jqueryscript.net/tags.php?/popup/">popup</a>="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
12           <ul class="dropdown-menu">
13             <li><a href="#">Action</a></li>
14             <li><a href="#">Another action</a></li>
15             <li><a href="#">Something else here</a></li>
16             <li role="separator" class="divider"></li>
17             <li class="dropdown-header">Nav header</li>
18             <li><a href="#">Separated link</a></li>
19             <li><a href="#">One more separated link</a></li>
20           </ul>
21         </li>
22       </ul>
23     </div>
24     <!--/.nav-collapse -->
25   </div>
26   <!--/.container-fluid -->
27 </nav>

4. Into these on mobile view:

01 <div id="side-menu" style="display: block;">
02   <button class="close"><span aria-hidden="true">×</span></button>
03   <div class="contents">
04     <ul class="nav navbar-nav">
05       <li class="active"><a href="#">Home</a></li>
06       <li><a href="#">About</a></li>
07       <li><a href="#">Contact</a></li>
08       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
09         <ul class="dropdown-menu">
10           <li><a href="#">Action</a></li>
11           <li><a href="#">Another action</a></li>
12           <li><a href="#">Something else here</a></li>
13           <li role="separator" class="divider"></li>