[Off-Canvas] Simple and Clean Side Navigation Menu With Dropdowns | jSide Menu

JSide menu is a well-designed, simple, and clean side-scrolling menu with dropdown menus. This plugin creates a sticky hamburger button at the top of the page that enables the user to detect a sidebar menu sliding to the left or right of the screen.

Key Features:

  • Fully customizable response.
  • Unlimited main items and child items can be added.
  • The profile is installed.
  • CSS3 and jQuery Animations enabled.
  • Iconic fonts for material design.
  • The background overlay is dimmed when opening the menu
  • Support for Chrome, Safari, Firefox, Opera, IE7 +, IOS, Android, and Windows phones.
  • Easy to use and easy to implement.

Multilevel Radial Navigation Menu With jQuery and CSS3

How to make use of it:

1. Load the jSide Menu plugin’s information within the HTML web page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!--jSide Menu Plugin-->
<script src="js/jquery.jside.menu.js"></script>
<!--jSide Menu CSS-->
<link rel="stylesheet" href="css/jside-menu.css">
<!--jSide Skins-->
<link rel="stylesheet" href="css/jside-skins.css" >

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

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

<div class="menu-head"> 
  <span class="layer">
    <div class="col">
      <div class="row for-pic">
        <div class="profile-pic">
          // Add Profile Image Here
      <div class="row for-name">
        <h3 title="User Name"> Username </h3>
        <span class="tagline"> Tagline</span> 

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

<nav class="menu-container">
  <ul class="menu-items">
    <li><span class="item-icon"><i class="zmdi zmdi-android"></i></span> <a href="#1"> Main item one </a></li>
    <li> <span class="item-icon"> <i class="zmdi zmdi-apple"></i> </span> <a href="#1"> Main item two </a></li>
    <li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-windows"></i> </span> <span class="dropdown-heading"> Item three with dropdown </span>
        <li> <a href="#2">dropdown sub item 1 </a> </li>
        <li> <a href="#2"> dropdown sub item 2 </a> </li>
        <li> <a href="#2"> dropdown sub item 3 </a> </li>
    <li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-devices"></i> </span> <span class="dropdown-heading"> Item four with dropdown </span>
        <li> <a href="#2">sub item 1 </a> </li>
        <li> <a href="#2">sub item 2 </a> </li>
        <li> <a href="#2">sub item 3 </a> </li>
    <li> <span class="item-icon"> <i class="zmdi zmdi-keyboard"></i> </span> <a href="#1"> Main item four </a></li>
    <li> <span class="item-icon"> <i class="zmdi zmdi-dock"></i> </span> <a href="#1"> Main item five </a></li>

5. Create an overlay component that may overlay the principle content when the navigation is revealed.

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

6. Call the function on the principle menu and completed it.


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

  jSidePosition: "position-right"

8. Decide whether or not to make the menu bar stick with the top of the webpage when scrolling down.

  jSideSticky: false

9. Change the default pores and skin. All potential skins:

  jSideSkin: "default-skin"

Off-canvas Nav With Unlimited Dropdowns, jQuery jSide Menu Plugin/Github

jSide Menu Demo

See Demo And Download

Official Website(CodeHimBlog): Click Here

This superior jQuery/javascript plugin is developed by CodeHimBlog. For extra Advanced Usages, please go to the official website.

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…