jQuery Responsive jSide Menu with Dropdowns
When “jQuery Responsive jSide Menu with Dropdowns” moves through design, development and browser testing, practical skills gap can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.
For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.
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>
(adsbygoogle = window.adsbygoogle || []).push({});
</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...
- How to Show Loading Spinner in JQuery?
- How to Create Ajax Submit Form Using jQuery?
- How To Get Current Page URL, Path, Host and hash using jQuery?
- How To Get, Set and Delete Div Background Image jQuery?
- JQuery Remove All Unwanted Whitespace From String Example
- Body Background Video Using Vide Jquery Example
- JQuery UI Autocomplete Example
- JQuery Split String By Comma Into Array Example