jQuery Responsive jSide Menu with Dropdowns

Admin   Jquery   178  2021-03-13 08:30:04

Hi Guys,

In this blog, I will show you jquery responsive jside menu with dropdowns. We will talk about jquery jside menu plugin. i am going to teach you jquery responsive jside menu with dropdown.

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.

Here i will give you full example for jquery responsive jside menu with dropdowns. So let's see the bellow example:

Example :

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset="UTF-8" />

<title> JQuery Responsive Side Menu with Dropdowns - jSide Menu </title>

<meta name="description" content="jSide Menu is a free jQuery menu plugin that helps you create side vertical navigation menu with dropdowns, fully responsive and customizable." />

<meta property="og:title" content="jSide Menu - jQuery Plugin" />

<meta property="og:image" content="https://codehimblog.github.io/jquery-jside-menu/img/preview.jpg" />

<!-- Google Font -->

<link href="https://fonts.googleapis.com/css?family=Questrial&display=swap" rel="stylesheet">

<!--Material Design Iconic Font-->

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!--jSide Menu CSS-->

<link rel="stylesheet" href="https://codehimblog.github.io/jquery-jside-menu/css/jside-menu.css">

<!--jSide Skins-->

<link rel="stylesheet" href="https://codehimblog.github.io/jquery-jside-menu/css/jside-skins.css">

</head>

<body>

<!-- Start jside Menu -->

<menu class="menubar">

<menuitem>

<button class="menu-trigger"> <i class="material-icons">menu</i> </button>

</menuitem>

<menuitem class="logo" title="Your Logo Goes Here">

<a href="#1"><img src="https://codehimblog.github.io/jquery-jside-menu/img/jside-menu.png" alt="jSide Menu" /> </a>

</menuitem>

</menu>

<div class="menu-body visibility">

<div class="menu-head">

<span class="layer">

<div class="col">

<div class="row for-pic">

<div class="profile-pic">

<img src="/image/imgpsh_fullsize.png" alt="Asif Mughal" />

</div>

</div>

<div class="row for-name">

<h3 title="User Name"> NiceSnippets </h3>

<span class="tagline"> Blog, Tutorial</span>

</div>

</div> <!--//col-->

</span>

</div> <!--//menu-head-->

<nav class="menu-container">

<ul class="menu-items">

<li><a href="#1"> <i class="material-icons">widgets</i> Main item one </a></li>

<li><a href="#1"> <i class="material-icons">bar_chart</i> Main item two </a></li>

<li class="has-sub"> <span class="dropdown-heading"> <i class="material-icons">collections</i> Item three with dropdown </span>

<ul>

<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> <a href="#2"> dropdown sub item 4 </a> </li>

<li> <a href="#2"> dropdown sub item 5 </a> </li>

<li> <a href="#2"> dropdown sub item 6 </a> </li>

<li> <a href="#2"> dropdown sub item 7 </a> </li>

</ul>

</li>

<li class="has-sub"> <span class="dropdown-heading"> <i class="material-icons">camera</i> Item four with dropdown </span>

<ul>

<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> <a href="#2">sub item 4 </a> </li>

</ul>

</li>

<li> <a href="#1"> <i class="material-icons">color_lens</i> Main item four </a></li>

<li> <a href="#1"> <i class="material-icons">pie_chart</i> Main item five </a></li>

<li> <a href="#1"> <i class="material-icons">highlight</i> Main item five </a></li>

<li> <a href="#1"> <i class="material-icons">format_size</i> Main item six </a></li>

</ul>

</nav>

</div>

<!--End jSide Menu-->

<!--Introduction and Demo Only -->

<header class="intro">

<h1>jQuery Responsive jSide Menu with Dropdowns</h1>

</header>

<main>

<article>

<h3> 1. jSide Menu Skin </h3>

<p> Choose the theme for the menu: </p>

<div class="theme-tray">

<section class="pl-color">

<h4> Plain Color</h4>

<span title="Love Red" class="red"> </span>

<span title="Clover Green" class="green"> </span>

<span title="Dodger Blue" class="blue"> </span>

<span title="Bright Neon Pink" class="bnp"> </span>

<span title="Pumpkin Orange" class="orange"> </span>

<span title="Black" class="black"> </span>

<span title="Neon Pink" class="pink"> </span>

<span title="Golden Brown" class="gol-b"> </span>

<span title="Greenish Blue" class="greenish"> </span>

<span title="Wood" class="wood"> </span>

</section>

<div style="margin:10px">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

style="display:block; text-align:center;"

data-ad-layout="in-article"

data-ad-format="fluid"

data-ad-client="ca-pub-7089100907045419"

data-ad-slot="7782420780"></ins>

<script>

</script>

</div>

<section class="gr-color">

<h4> Gradient Color</h4>

<span title="Flickr" class="flickr"> </span>

<span title="Facebook Messenger" class="fb-messenger"> </span>

<span title="Moonlit Asteroid" class="moonlit"> </span>

<span title="Park Life" class="park-life"> </span>

<span title="Dance to Forget" class="d2f"> </span>

<span title="Man of the Steel" class="steel-man"> </span>

<span title="Amethyst" class="amethyst"> </span>

<span title="Between the Clouds" class="between-clouds"> </span>

<span title="Crazy Orange"class="crazy-orange"> </span>

<span title="Endless River" class="endless-river"> </span>

</section>

</div>

<h3>2. Menubar Position</h3>

<p> Choose the menubar position:</p>

<ol>

<li> <input type="radio" id="set-top" name="radio" checked/><label for="set-top"> Fixed on Top</label> </li>

<li> <input type="radio" name="radio" id="set-st"/><label for="set-st"> Static</lable> </li>

</ol>

</article>

</main>

<!-- jQuery -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!--jSide Menu Js-->

<script src="https://codehimblog.github.io/jquery-jside-menu/js/jquery.jside.menu.js"></script>

<script>

$(function(){

$(".menu-container").jSideMenu({

jSidePosition: "position-left", //possible options position-left or position-right

jSideSticky: true, // menubar will be fixed on top, false to set static

jSideSkin: "default-skin", // to apply custom skin, just put its name in this string

});

});

</script>

<!--DEMO ONLY FILES-->

<!--Demo CSS-->

<link rel="stylesheet" href="https://codehimblog.github.io/jquery-jside-menu/docs/demo-only.css" />

<script src="https://codehimblog.github.io/jquery-jside-menu/docs/demo-only.js"></script>

</body>

</html>

It will help you...