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.
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 > |
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 > |