jQuery Responsive Multilevel Dropdowns Menu

Here is a lightweight jQuery plugin to create responsive multilevel dropdowns menu.
A CSS3 and jQuery based navigation menu that convert into off canvas on mobile devices.


Plugin Overview

Plugin: Codehim Dropdown
Author: Asif Mughal
Licence: MIT Licence
Published: February 12, 2019
Official Website: Go to website
Dependencies: jQuery 1.3.1 or Latest version & Font Awesome 4
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 16.3 KB

How to Use Multilevel Dropdowns Menu:

1. First of all, load jQuery (JavaScript library) and Font Awesome for menu icons into your webpage.

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

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. After that, include the dropdown-menu‘s CSS and JavaScript files.

<!--Codehim Dropdown JS-->
<script src="js/codehim.dropdown.js"></script>

<!--Codehim Dropdown CSS-->
<link rel="stylesheet" href="css/codehim-dropdown.css">

3. After loading all assets, create the multi-level dropdown navigation from nested html lists like below.

<nav class="codehim-dropdown">
  <ul class="dropdown-items">
    <li class="home-link">
       <a href="#home_link"><i class="fa fa-home"></i></a>
    </li>
    <li>
       <span class="dropdown-heading">
       <i class="icon fa fa-rss"></i>
       News and Media</span>
       <ul class="menu-items">
          <li> <a href="#1"> Item one</a></li>
          <li class="has-child">
             <span class="parent">Item two  </span>
             <ul>
                <li> <a href="#11"> sub item one</a></li>
                <li> <a href="#11"> sub item two</a></li>
                <li> <a href="#11"> sub item two</a></li>
             </ul>
          </li>
          <li> <a href="#1">Item three </a></li>
          <li> <a href="#1"> Item four</a></li>
          <li> <a href="#1">Item five </a></li>
          <li class="has-child">
             <span class="parent">Item last  </span>
             <ul>
                <li> <a href="#11"> sub item one</a></li>
                <li> <a href="#11"> sub item two</a></li>
                <li> <a href="#11"> sub item two</a></li>
                <li class="has-child">
                   <span class="parent">Item two  </span>
                   <ul>
                      <li> <a href="#11"> sub item one</a></li>
                      <li> <a href="#11"> sub item two</a></li>
                      <li> <a href="#11"> sub item two</a></li>
                   </ul>
                </li>
             </ul>
          </li>
       </ul>
    </li>
    <li> <a class="main-links" href="#11">
      <i class="icon fa fa-question-circle"></i>
      About</a>
    </li>
    <li> <a class="main-links" href="#11">
      <i class="icon fa fa-envelope"></i>
      Contact</a>
    </li>
  </ul>
</nav>

4. Finally, initialize the plugin with nav and done.

$(function(){

  $(".codehim-dropdown").CodehimDropdown();

});

5. All available options to customize the working of the plugin.

$(".codehim-dropdown").CodehimDropdown({

  // red, yellow, blue, green, orange, brown, teal
  // purple, indigo, cyan, light-green, amber, gray
  // black, blue-gray, lime, light-blue, deep-purple
  // deep-pink, deep-brown
  skin: "red",

  // when a dropdown opens, auto closes the others
  slideUpOther: true,

  // sticks the menu to the top
  sticky: true,
  
  // animation name
  list<a href="https://www.jqueryscript.net/animation/">Animation</a>: "fadeInUp",
  subListAnimation: "fadeInUp", //Animate sub items when revealed 
  
  // shows background overlay when the off-canvas menu is toggled
  dimOverlay: true,

  // default, fast, faster, slow and slower
  offCanvasSpeed: "default",

  // left or right
  offCanvasDirection: "left",

  // width of the off-canvas navigation
  offCanvasWidth: 290
  
});

2 Trackbacks / Pingbacks

  1. jQuery Responsive Multilevel Dropdowns Menu – ApprovedNews
  2. WOW Blog

Leave a Reply

Your email address will not be published.


*