This time I will share jQuery Plugin and tutorial about Mobile-first Off-canvas Side Navigation For Bootstrap 5, hope it will help you in programming stack.
A responsive, user-friendly, off-canvas side navigation system for the Bootstrap 5 framework. Written in JavaScript (jQuery) and CSS/CSS3.
Features:
- Desktop & Tablet: Shows a vertical toolbar on the screen that expands to the full-width when you click the hamburger button.
- Mobile: Hides the vertical toolbar and allows the user to toggle the off-canvas side menu by tapping the hamburger button.
- Shows a background overlay covering the main content when the off-canvas side menu is activated.
How to use it:
1. Add menu items to the off-canvas side navigation. Make sure you first have Bootstrap 5 framework loaded in the document.
1 |
< div id = "SideNavID" class = "sideNavClose" > |
3 |
< a class = "nav-menu-item" href = "#" >Menu 2</ a > |
4 |
< a class = "nav-menu-item" href = "#" >Menu 3</ a > |
5 |
< a class = "nav-menu-item" href = "#" >Menu 4</ a > |
6 |
< a class = "nav-menu-item" href = "#" >Menu 5</ a > |
2. Create a hamburger toggle button on the navbar.
1 |
< a id = "NavMenuBar" class = "navbar-brand nabMenuBar" href = "#" > |
3. Create an empty container for the background overlay.
1 |
< div id = "ContentOverlayID" class = "ContentOverlayClose" > |
4. The necessary CSS styles for the Off-canvas Side Navigation.
02 |
color : #FE0A52 !important ; |
03 |
font-size : 24px !important ; |
06 |
text-decoration : none ; |
10 |
text-decoration : none ; |
12 |
border-left : 5px solid white ; |
26 |
background-color : #FE0A52 ; |
39 |
background-color : #FE0A52 ; |
51 |
background-color : rgba( 0 , 0 , 0 , 0.5 ); |
61 |
@media ( max-width : 575.98px ) { |
62 |
.Content { margin-left : 00px ; } |
63 |
.sideNavClose { visibility : hidden } |
5. Load the required jQuery library at the end of the document.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
6. The main JavaScript (jQuery script) to activate the off-canvas side navigation.
01 |
$( '#NavMenuBar' ).click( function () { |
05 |
$( '#ContentOverlayID' ).click( function () { |
09 |
function SideMenuOpenClose() { |
10 |
let SideNavID= $( '#SideNavID' );
|