jQuery jSide Library to Create Beautiful HamBurger Menus with DropDowns

jQuery jSide Library to Create Beautiful HamBurger Menus with DropDowns

jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

Main Features

  • Fully Responsive and Customizable.
  • Unlimited main items and sub items can be added.
  • +20 Built in Skins.
  • Sticky Profile.
  • CSS3 and jQuery Animations Enabled.
  • Material Design Iconic Fonts.
  • Background dim-overlay when menu open
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
  • User Friendly and Easy to Implement.

 

 

<!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="css/jside-menu.css">
   <!--jSide Skins-->
<link rel="stylesheet" href="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="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="img/asif-mughal.jpg" alt="Asif Mughal" /> 
         </div>
  </div>
         <div class="row for-name">
   <h3 title="User Name"> Asif Mughal </h3>
        <span class="tagline"> Web Developer</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>
      <p>
       jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. 
         <br />
         <br />
<b> Written in:</b><i> HTML, CSS, JS</i><br>
          <b> Dependency: </b> <i>  jQuery 3.4.1 & Material Design Iconic Font 2.0  </i>
      </p>
<div class="action">
<a class="btn github" href="https://github.com/CodeHimBlog/jquery-jside-menu"> Fork on GiHub </a>
<a class="btn down" href="https://github.com/CodeHimBlog/jquery-jside-menu/archive/master.zip"> Download </a>

</div>
</header>


<main>
<article>
   
<h2> Main Features </h2>
   <ul>
      <li>Fully Responsive and Customizable.</li>
      <li>Unlimited main items and sub items can be added. </li>
      <li>Sticky Profile.</li>
      <li> CSS3 and jQuery Animations Enabled.  </li>
      <li>Material Design Iconic Fonts. </li>
     <li> Background dim-overlay when menu open </li>
<li> Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported. </li>
      <li> User Friendly and Easy to Implement. </li>
   </ul>
 

<h2> Save Time to Quickly Customize </h2>
<p>
You can highly customize this navigation system without investing time in modifications of code.
</p>

<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>
   <!--//theme-tray-->

<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>

<h3>3. Menu Container Position </h3>
<p> Choose the suitable position for menu container. </p>
<select class="menu-position">
<option> position-left </option>
<option> position-right </option>
</select>

<h2>Generated Script</h2>
<p>
Copy and paste it into document ready function. 
</p>
   <pre class="prettyprint">
$(".menu-container").jSideMenu({
   <span class="j-pos">jSidePosition: "position-left",</span>
   <span class="j-sticky">jSideSticky: true, </span> 
   <span class="j-skin">jSideSkin: "default-skin", </span>
  });
 </pre>

<h2> Browsers Compatability</h2>
   <p>Best view on Google Chrome, Firefox, Opera and UC Desktop Browser</p>
     
</article>
</main>



<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <!--jSide Menu Js-->
<script src="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="docs/demo-only.css" />
<script src="docs/demo-only.js"></script>
<footer class="credit">
Coded with <span title="Coffee"></span> by Asif Mughal © 2019 - <a href="https://www.codehim.com" rel="dofollow" title="Awesome Web Projects and Tutorials" target="_blank"> Codehim.com </a>
      </footer>
</body>
</html>

 

Leave a Reply