off canvas nav bootstrap 5 - Free Download Mobile-first Off-canvas Side Navigation For Bootstrap 5

Free Download Mobile-first Off-canvas Side Navigation For Bootstrap 5

Posted on

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.

off canvas nav bootstrap 5 - Free Download Mobile-first Off-canvas Side Navigation For Bootstrap 5
File Size: 8.47 KB
Views Total: 2291
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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">
2   <a class="nav-menu-item" href="#"><a href="https://www.jqueryscript.net/menu/">Menu</a> 1</a>
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>
7   ...
8 </div>

2. Create a hamburger toggle button on the navbar.

1 <a id="NavMenuBar" class="navbar-brand nabMenuBar" href="#">
2   Hamburger Icon Here
3 </a>

3. Create an empty container for the background overlay.

1 <div id="ContentOverlayID" class="ContentOverlayClose">
2 </div>

4. The necessary CSS styles for the Off-canvas Side Navigation.

01 .nabMenuBar{
02   color: #FE0A52 !important;
03   font-size: 24px !important;
04 }
05 .nav-menu-item{
06   text-decoration: none;
07   color: white;
08 }
09 .nav-menu-item:hover{
10   text-decoration: none;
11   color: white;
12   border-left: 5px solid white;
13   transition: 0.1s;
14 }
15 .sideNavOpen{
16   height: 100%;
17   width: 220px;
18   position: fixed;
19   top:0;
20   left: 0;
21   z-index: 10;
22   overflow-x: hidden;
23   padding-left: 10px;
24   padding-top: 20px;
25   transition: 0.1s;
26   background-color: #FE0A52;
27 }
28 .sideNavClose{
29   height: 100%;
30   width: 60px;
31   position: fixed;
32   top:0;
33   left: 0;
34   z-index: 10;
35   overflow-x: hidden;
36   padding-left: 10px;
37   padding-top: 20px;
38   transition: 0.1s;
39   background-color: #FE0A52;
40 }
41 .ContentOverlay{
42   display: block;
43   position: fixed;
44   height: 100%;
45   top:0;
46   left: 0;
47   z-index: 7;
48   right: 0;
49   bottom: 0;
50   cursor: pointer;
51   background-color: rgba(0,0,0,0.5);
52 }
53 .ContentOverlayClose{
54   display: none;
55 }
56 .Content{
57   margin-left: 60px;
58   margin-top: 60px;
59   z-index: 5;
60 }
61 @media (max-width: 575.98px) {
62   .Content { margin-left: 00px; }
63   .sideNavClose { visibility: hidden }
64 }

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 () {
02   SideMenuOpenClose();
03 });
04  
05 $('#ContentOverlayID').click(function () {
06   SideMenuOpenClose();
07 });
08  
09 function SideMenuOpenClose() {