jQuery Side Navigation Menu with Dropdowns – jSide Menu

jSide Menu is a well designed, responsive side navigation menu with dropdowns. The plugin offers to create cross-platform, mobile-friendly off-canvas navigation system for responsive website projects.

Plugin Overview

Plugin: jSideMenu
Author: Asif Mughal
Licence: MIT Licence
Published: January 11, 2024
Official Website: Go to website
Dependencies: jQuery 1.3.1 or Latest version & Material Design Iconic Library.
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 501 KB

How to Use It:

1. Load the jSide Menu plugin’s files in the HTML 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 menu 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 information.

<div class="menu-head"> 
  <span class="layer">
    <div class="col">
      <div class="row for-pic">
        <div class="profile-pic">
          <img src="profile.jpg" alt="profile" /> 
      <div class="row for-name">
        <h3 title="User Name"> Username </h3>
        <span class="tagline"> Tagline</span> 

4. Create a multi-level menu for the 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 element that will overlay the main content when the navigation is revealed.

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

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


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

  jSidePosition: "position-right"

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

  jSideSticky: false

9. Change the default skin. All possible skins:

  • flickr
  • fb-messenger
  • moonlit
  • park-life
  • d2f
  • steel-man
  • amethyst
  • between-clouds
  • crazy-orange
  • endless-river
  jSideSkin: "default-skin"

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link