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.
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.
4 |
<script src="js/jquery.jside.menu.js"></script> |
6 |
<link rel="stylesheet" href="css/jside-menu.css"> |
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"> |
04 |
<div class="row for-pic"> |
05 |
<div class="profile-pic"> |
06 |
<img src="profile.jpg" alt="profile" /> |
09 |
<div class="row for-name"> |
10 |
<h3 title="User Name"> Username </h3> |
11 |
<span class="tagline"> Tagline</span> |
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> |
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> |
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> |
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> |
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> |
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" |
8. Decide whether to make the menu bar stick to the top of the webpage when scrolling down (Default: true).
1 |
$(".menu-container").jSideMenu({ |
