off canvas nav dropdowns jside - Free Download Off-canvas Nav With Unlimited Dropdowns - jSide Menu

Free Download Off-canvas Nav With Unlimited Dropdowns – jSide Menu

Posted on

This time I will share jQuery Plugin and tutorial about Off-canvas Nav With Unlimited Dropdowns – jSide Menu, hope it will help you in programming stack.

off canvas nav dropdowns jside - Free Download Off-canvas Nav With Unlimited Dropdowns - jSide Menu
File Size: 664 KB
Views Total: 10601
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

jSide Menu is a responsive, skinnable, cross-platform, mobile-friendly off-canvas navigation system built with HTML5, CSS3, and JavaScript (jQuery).

The jSide Menu plugin creates a sticky (or static) hamburger button on the top of the page that enables the user to reveal a sidebar menu sliding from the left or right of the screen.

Supports unlimited dropdown menus based on the HTML unordered list.

How to use it:

1. Load the jSide Menu plugin’s files in the HTML page.

1 <!--jQuery-->
2 <script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
3 <!--jSide Menu Plugin-->
4 <script src="js/"></script>
5 <!--jSide Menu CSS-->
6 <link rel="stylesheet" href="css/jside-menu.css">
7 <!--jSide Skins-->
8 <link rel="stylesheet" href="css/jside-skins.css" >

2. Load the Material Design Iconic Fonts for the flip icons.

3. Create the menu header. Great for profile information.

01 <div class="menu-head">
02   <span class="layer">
03     <div class="col">
04       <div class="row for-pic">
05         <div class="profile-pic">
06           <img src="profile.jpg" alt="profile" />
07         </div>
08       </div>
09       <div class="row for-name">
10         <h3 title="User Name"> Username </h3>
11         <span class="tagline"> Tagline</span>
12       </div>
13     </div>
14   </span>
15 </div>

4. Create a multi-level menu for the off-canvas navigation.

01 <nav class="menu-container">
02   <ul class="menu-items">
03     <li><span class="item-icon"><i class="zmdi zmdi-android"></i></span> <a href="#1"> Main item one </a></li>
04     <li> <span class="item-icon"> <i class="zmdi zmdi-apple"></i> </span> <a href="#1"> Main item two </a></li>
05     <li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-windows"></i> </span> <span class="dropdown-heading"> Item three with dropdown </span>
06       <ul>
07         <li> <a href="#2">dropdown sub item 1 </a> </li>
08         <li> <a href="#2"> dropdown sub item 2 </a> </li>
09         <li> <a href="#2"> dropdown sub item 3 </a> </li>
10         ...
11       </ul>
12     </li>
13     <li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-devices"></i> </span> <span class="dropdown-heading"> Item four with dropdown </span>
14       <ul>
15         <li> <a href="#2">sub item 1 </a> </li>
16         <li> <a href="#2">sub item 2 </a> </li>
17         <li> <a href="#2">sub item 3 </a> </li>
18         ...
19       </ul>
20     </li>
21     <li> <span class="item-icon"> <i class="zmdi zmdi-keyboard"></i> </span> <a href="#1"> Main item four </a></li>
22     <li> <span class="item-icon"> <i class="zmdi zmdi-dock"></i> </span> <a href="#1"> Main item five </a></li>
23   </ul>
24 </nav>

5. Create an overlay element that will overlay the main content when the navigation is revealed.

1 <div class="dim-overlay"></div>

6. Call the function on the main menu and done.

1 $(".menu-container").jSideMenu();

7. Make the off-canvas navigation slide from the right of the webpage.

1 $(".menu-container").jSideMenu({
2   jSidePosition: "position-right"
3 });

8. Decide whether to make the menu bar stick to the top of the webpage when scrolling down (Default: true).