This time I will share jQuery Plugin and tutorial about Off-canvas Sidebar Navigation For Bootstrap 4, hope it will help you in programming stack.
File Size: | 5.16 KB |
---|---|
Views Total: | 3791 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a small jQuery script that transforms the regular responsive Bootstrap4 navbar into a mobile-friendly off-canvas side menu with minimal effort.
Instead of using the default Bootstrap 4 responsive navbar behavior, the plugin collapses the menu items behind a toggle button which allows the visitor to toggle an off-canvas menu sliding from the left side of the screen.
How to use it:
1. Add the CSS class ‘mobileMenu‘ to your Bootstrap 4 navbar.
01 |
< nav |
02 |
class = "navbar navbar-expand-lg navbar-dark bg-dark justify-content-sm-start fixed-top" |
03 |
> |
04 |
< div class = "container-fluid" > |
05 |
< a class = "navbar-brand order-1 order-lg-0 ml-lg-0 ml-2 mr-auto" href = "#" |
06 |
>jQuery Script</ a |
07 |
> |
08 |
< button class = "navbar-toggler align-self-start" type = "button" > |
09 |
< span class = "navbar-toggler-icon" ></ span > |
10 |
</ button > |
11 |
12 |
< div |
13 |
class = "collapse navbar-collapse bg-dark p-3 p-lg-0 mt-5 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-end mobileMenu" |
14 |
id = "navbarSupportedContent" |
15 |
> |
16 |
< ul class = "navbar-nav align-self-stretch" > |
17 |
< li class = "nav-item active" > |
18 |
< a class = "nav-link" href = "#" |
19 |
>Home < span class = "sr-only" >(current)</ span ></ a |
20 |
> |
21 |
</ li > |
22 |
< li class = "nav-item dropdown" > |
23 |
< a |
24 |
class = "nav-link dropdown-toggle" |
25 |
href = "#" |
26 |
id = "navbarDropdown" |
27 |
role = "button" |
28 |
data-toggle = "dropdown" |
29 |
aria-has<a href = "https://www.jqueryscript.net/tags.php?/popup/" >popup</ a >="true" |
30 |
aria-expanded="false" |
31 |
> |
32 |
Dropdown |
33 |
</ a > |
34 |
< div class = "dropdown-menu" aria-labelledby = "navbarDropdown" > |
35 |
< a class = "dropdown-item" href = "#" >Action</ a > |
36 |
< a class = "dropdown-item" href = "#" >Another action</ a > |
37 |
< div class = "dropdown-divider" ></ div > |
38 |
< a class = "dropdown-item" href = "#" >Something else here</ a > |
39 |
</ div > |
40 |
</ li > |
41 |
< li class = "nav-item dropdown" > |
42 |
< a |
43 |
class = "nav-link dropdown-toggle" |
44 |
href = "#" |
45 |
id = "navbarDropdown" |
46 |
role = "button" |
47 |
data-toggle = "dropdown" |
48 |
aria-haspopup = "true" |
49 |
aria-expanded = "false" |
50 |
> |
51 |
Dropdown |
52 |
</ a > |
53 |
< div class = "dropdown-menu" aria-labelledby = "navbarDropdown" > |
54 |
< a class = "dropdown-item" href = "#" >Action</ a > |
55 |
< a class = "dropdown-item" href = "#" >Another action</ a > |
56 |
< div class = "dropdown-divider" ></ div > |
57 |
< a class = "dropdown-item" href = "#" >Something else here</ a > |
58 |
</ div > |
59 |
</ li > |
60 |
< li class = "nav-item" > |
61 |
< a |
62 |
class = "nav-link disabled" |
63 |
href = "#" |
64 |
tabindex = "-1" |
65 |
aria-disabled = "true" |
66 |
>Disabled</ a |
67 |
> |
68 |
</ li > |
69 |
</ ul > |
70 |
< form class = "form-inline my-2 my-lg-0 align-self-stretch" > |
71 |
< input |
72 |
class = "form-control mr-sm-2" |
73 |
type = "search" |
74 |
placeholder = "Search" |
75 |
aria-label = "Search" |
76 |
source : jquery.net
|