jQuery Responsive Drop Down Menu with Submenu

- December 05, 2018

Codehim Dropdown jQuery Plugin helps you to create an awesome multi level drop down menu for your next website project with amazing and cool animation effects. Generally, it's horizontal mega drop down menu that converts into off canvas (side menu) on Mobile devices.

HTML Code for Dropdown Menu

The following is html code for menu bar with submenu dropdown.

<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"> submenu item one</a></li>
                        <li> <a href="#11"> submenu item two</a></li>
                        <li> <a href="#11"> submenu 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"> submenu item two</a></li>
                              <li> <a href="#11"> submenu item two</a></li>
                           </ul>
                        </li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li>
               <span class="dropdown-heading">
               <i class="icon fa fa-users"></i>
               Blog and People</span>
               <ul class="menu-items">
                  <li> <a href="#1"> blog one</a></li>
                  <li> <a href="#1">Item two </a></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>
               </ul>
            </li>
            <li>
               <span class="dropdown-heading">
               <i class="icon fa fa-vine"></i>
               Entertainment</span>
               <ul class="menu-items">
                  <li> <a href="#1"> Fun and exciting</a></li>
                  <li> <a href="#1">Item two </a></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>
               </ul>
            </li>
            <li>
               <span class="dropdown-heading">
               <i class="icon fa fa-play-circle"></i>
               Tv and Movies</span>
               <ul class="menu-items">
                  <li> <a href="#1"> Item one</a></li>
                  <li> <a href="#1">Item two </a></li>
                  <li> <a href="#1">Item three </a></li>
                  <li class="has-child">
                     <span class="parent">nested menu  </span>
                     <ul>
                        <li> <a href="#11"> submenu item one</a></li>
                        <li> <a href="#11"> submenu item two</a></li>
                        <li> <a href="#11"> submenu 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>

CSS Code for Dropdown Menu

The following is the drop down menu css code:

/*  Plugin: Codehim Dropdown (Multilevel Dropdowns to Off Canvas) 
 *   Requires: jQuery 1.7 or higher
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlog
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2018 - Asif Mughal
 */
* {
 margin: 0;
 padding: 0;
}
/* The menu mar that contains dropdown headings and their sub menu*/
.codehim-dropdown {
 font-family: 'Nunito', sans-serif;
 font-style: normal;
 font-weight: 300;
 font-smoothing: antialiased;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.codehim-dropdown {
 width: 100%;
 height: 50px;
 box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
 transition: 0s;
}

/* To fixed on top menubar */
.codehim-dropdown.sticky {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}


/*Color Skins  for dropdown menu*/

.red {
 background: #e00032;
}

.yellow {
 background: #fdd835;
}

.green {
 background: #0a8f08;
}

.blue {
 background: #4d73ff;
}

.orange {
 background: #ff3d00;
}

.brown {
 background: #6d4c41;
}

.teal {
 background: #00897b;
}

.purple {
 background: #9c27b0;
}

.indigo {
 background: #3f51b5;
}

.cyan {
 background: #00acc1;
}

.light-green {
 background: #7cb342;
}

.amber {
 background: #ffc107;
}

.gray {
 background: #424242;
}

.black {
 background: #000;
}

.blue-gray {
 background: #546e7a;
}

.lime {
 background: #aeea00;
}

.light-blue {
 background: #03a9f4;
}

.deep-purple {
 background: #512da8;
}

.deep-pink {
 background: #ad1457;
}

.deep-brown {
 background: #4e342e;
}


/* Global Style for Codehim Dropdowns */

.codehim-dropdown a {
 outline: 0;
}

.has-child span.parent+ul,
.menu-items {
 background: #fff;
 list-style: none;
 display: none;
}

.dropdown-heading:after {
 font-family: FontAwesome;
 font-weight: 300;
 display: inline-block;
 content: "\f107";
}

.dropdown-heading.active:after {
 transform: rotateZ(180deg);
 -webkit-transform: rotateZ(180deg);
 -moz-transform: rotateZ(180deg);
}

.dropdown-heading,
.dropdown-heading.active,
.dropdown-heading:hover,
.dropdown-heading:after,
.dropdown-heading.active:after {
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
}


/* Home Link Style */

li.home-link a {
 text-decoration: none;
 color: rgba(255, 255, 255, 0.7);
 text-align: center;
 font-size: 20px;
 display: inline-block;
 width: 45px;
 height: 50px;
 background: rgba(0, 0, 0, 0.3);
 line-height: 50px;
}


/* Dim background effect */

.dim-overlay {
 display: none;
}

.dim-overlay:before {
 content: "";
 background-color: rgba(0, 0, 0, .5);
 height: 100%;
 /* for zombies browsers */
 height: 100vh;
 left: 0;
 position: fixed;
 top: 0;
 width: 100%;
 overflow: hidden;
 z-index: 2;
}

.menu-items li a {
 display: block;
 padding: 10px;
 color: #444;
 cursor: pointer;
 text-decoration: none;
 font-size: 13px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.has-child span.parent:hover,
.menu-items li a:hover {
 background: #e0e0e0;
}

.has-child span.parent:after {
 font-family: FontAwesome;
 float: right;
}

.main-links {
 text-decoration: none;
}


/* Codehim Dropdowns Mobile View */

@media only screen and (max-width: 480px) {
 .codehim-dropdown {
  position: relative;
  font-size: 14px;
 }
 .codehim-dropdown .icon {
  margin: 0 10px 0 5px;
  font-size: 16px;
 }
 /* The Off Canvas Menu */
 .dropdown-items {
  height: 100%;
  /* for zombies browsers */
  height: 100vh;
  display: none;
  overflow: scroll;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 999;
 }
 .menu-items {
  background: #fff;
 }
 .menu-items li a {
  padding-left: 15px;
  background: transparent;
 }
 .dropdown-items li {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.16);
  overflow: hidden;
 }
 /* hamburger menu icon to reveal off canvas menu on mobile devices */
 .hamburger {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 8px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  line-height: 32px;
 }
 .hamburger:hover {
  background: rgba(0, 0, 0, 0.15);
 }
 .hamburger:after {
  font-family: FontAwesome;
  content: "\f0c9";
  font-weight: 200;
 }
 .hamburger.left {
  left: 10px;
 }
 .hamburger.right {
  right: 10px;
 }
 .dropdown-items .parent+ul {
  background: #fff;
  margin: 0;
  box-sizing: border-box;
  display: none;
 }
 /* Sub Menu list item */
 .dropdown-items .parent+ul li a {
  padding-left: 30px;
 }
 .main-links,
 .dropdown-heading {
  display: block;
  padding: 15px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
 }
 .main-links:hover,
 .dropdown-heading:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
 }
 .dropdown-heading:after {
  font-family: FontAwesome;
  font-weight: 300;
  display: inline-block;
  content: "\f107";
  float: right;
 }
 /* Sub Dropdowns heading */
 .has-child span.parent {
  padding: 15px;
  font-weight: 700;
  border-bottom: 1px solid #e0e0e0;
  display: block;
  background: transparent;
 }
 .has-child span.parent:after {
  content: "\f107";
  margin-right: 15px;
 }
}


/* Codehim Dropdown Tab and ipad View */

@media screen and (max-width: 719px) and (min-width: 480px) {
 .codehim-dropdown {
  /* Working on it */
  /*The tab view is coming soon */
 }
}


/* Codehim Dropdowns PC View */

@media only screen and (min-width: 480px) {
 .menu-items {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  width: 150px;
  position: absolute;
  left: 2px;
 }
 .menu-items li {}
 .dropdown-items {
  list-style: none;
 }
 /* A list of main items */
 .dropdown-items li {
  display: inline;
  position: relative;
 }
 a.main-links,
 .dropdown-heading {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  display: inline-block;
  padding: 6px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-weight: 400;
  text-decoration: none;
 }
 .main-links:hover,
 .dropdown-heading.active,
 .dropdown-heading:hover {
  color: #fff;
 }
 .dropdown-heading:after {
  margin-left: 8px;
 }
 .has-child span.parent:after {
  content: "\f105";
 }
 /* Multilevel Dropdown */
 .has-child {
  position: relative;
 }
 /* The visible heading (parent) for multilevel dropdown items */
 .has-child span.parent {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 13px;
  font-weight: 400;
 }
 .has-child ul {
  position: absolute;
  display: block;
  width: 140px;
  left: 100%;
  z-index: 3;
  top: 0;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  display: none;
 }
}

jQuery Code for Dropdown Menu

The following is the drop down menu jquery code:

/*  Plugin: Codehim Dropdown (Multilevel Dropdowns to Off Canvas) 
 *   Requires: jQuery 1.7 or higher
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlog
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2018 - Asif Mughal
 */
(function ($) {
 $.fn.CodehimDropdown = function (options) {
  var setting = $.extend({
   skin: "red", //skin color for menubar and drawer
   slideUpOther: true, //close other opened dropdowns if user trigger new one 
   sticky: true, //fixed menubar on top, false to static
   /* Some settings for mobile devices (small screen) when horizontal menubar converted into offcanvas menu */
   listAnimation: "fadeInUp", //Animate list items when revealed 
   subListAnimation: "fadeInUp", //Animate sub items when revealed 
   //@info: any animation can be used, put the name of animation class name from animate.css in the above options
   dimOverlay: true, //possible options true or false 
   offCanvasSpeed: "default", //possible options are default, fast, faster, slow and slower
   offCanvasDirection: "left", //possible options are left and right 
   offCanvasWidth: 290, //the width of drawer on mobile devices in pixels
   onOffCanvasOpen: function () {}, //your custom function to execute when menu open on mobile devices
   onOffCanvasClose: function () {}, //your custom function to execute when menu closed

  }, options);

  return this.each(function () {

   var target = $(this);
   var devWidth = $(window).width(); //available width of the device
   var devHeight = $(window).height(); //available height of the device
   var dimOverlay = $div(); //creates div element for dim overlay
   var hamburger = $div(); //creates div element for hamburger menu icon 
   var offCanvas = $(target).find(".dropdown-items"); //looks on (small screen) mobile devices


   //Applying Customization 

   if (setting.offCanvasDirection == "right") {
    $(offCanvas).css({
     'right': -(setting.offCanvasWidth),
     'display': 'block',
    });

    $(hamburger).addClass("hamburger right");
   } else {
    $(offCanvas).css({
     'left': -(setting.offCanvasWidth),
     'display': 'block',
    });
    $(hamburger).addClass("hamburger left");
   }

   if (setting.dimOverlay == true) {
    $(dimOverlay).addClass("dim-overlay").insertAfter(target);

   }

   $(target).addClass(setting.skin).prepend(hamburger);

   $(offCanvas).addClass(setting.skin);


   //OffCanvas Speed 
   var speed = setting.offCanvasSpeed;
   //assign values (in milliseconds) to speed 
   switch (speed) {
    case "slow":
     speed = 1000;

     break;
    case "slower":

     speed = 2000;
     break;

    case "fast":

     speed = 300;
     break;

    case "faster":

     speed = 150;
     break;

    default:
     speed = 400;
   };

   if (setting.sticky == true) {
    $(target).addClass("sticky");

    $("main").css({
     'marginTop': 50,
    });
   }


   $(".dropdown-heading").click(function () {

    var thisMenu = $(this).find(" + .menu-items");

    var thisList = $(thisMenu).children("li");

    for (var i = 0; i < thisList.length; i++) {

     $(thisList).eq(i).addClass("animated" + " " + setting.listAnimation).css({
      'animationDelay': "0." + i + "s",

     });

    }


    $(this).toggleClass("active");


    $(thisMenu).slideToggle();


    //close other dropdowns if opened

    if (setting.slideUpOther == true) {

     $(".menu-items").not(thisMenu).slideUp();
     $(".dropdown-heading").not(this).removeClass("active");
    }

   });


   $(".parent").on("click", function () {

    var subMenu = $(this).siblings("ul");

    $(subMenu).slideToggle();

    var thisList = $(subMenu).children("li");

    for (var i = 0; i < thisList.length; i++) {

     $(thisList).eq(i).addClass("animated" + " " + setting.subListAnimation).css({
      'animationDelay': "0." + i + "s",

     });

    }
    //close other sub items if opened
    $(".has-child ul").not(subMenu).not($(this).parents("ul")).slideUp();

   });


   // Mobile Design

   $(hamburger).click(function () {
    $(this).toggleClass("active");

    openMenu();

    $(dimOverlay).fadeIn();


   });

   var offCanvasDirection = setting.offCanvasDirection;

   //Open Menu
   function openMenu() {

    switch (offCanvasDirection) {
     case "left":
      $(offCanvas).animate({
       'left': 0,

      }, speed, function () {

       setting.onOffCanvasOpen();

      });

      break;

     case "right":

      $(offCanvas).animate({
       'right': 0,

      }, speed, function () {

       setting.onOffCanvasOpen();

      });

      break;

     default:
      alert("you have missing the off canvas direction");


    };

   } //end open menu


   //Close Menu
   function closeMenu() {

    switch (offCanvasDirection) {
     case "left":
      $(offCanvas).animate({
       'left': -(setting.offCanvasWidth),

      }, speed, function () {

       $(hamburger).removeClass("active");
       setting.onOffCanvasClose();

      });

      break;

     case "right":

      $(offCanvas).animate({
       'right': -(setting.offCanvasWidth),

      }, speed, function () {

       $(hamburger).removeClass("active");
       setting.onOffCanvasClose();

      });

      break;

     default:
      alert("you have missing the off canvas direction");


    };

   } //end close menu


   //close menu if user click outside of it
   $(window).click(function (e) {
    if ($(e.target).closest('.codehim-dropdown').length) {
     return;
    }
    if ($(e.target).closest(offCanvas).length) {
     return;
    }

    //check if menu really opened
    if ($(hamburger).hasClass("active")) {

     closeMenu();

    }

    $(dimOverlay).fadeOut();

    $(".menu-items").slideUp();
    $(".dropdown-heading").removeClass("active");

   });


   // To get everything responsive 

   responsive(); //responsive on document ready

   $(window).on("resize", function () {

    responsive();


   });


   function responsive(menuItemsWidth) {

    //to get the fresh device dimensions
    devWidth = $(window).width();
    devHeight = $(window).height();

    if (devWidth > 480) {
     $(offCanvas).width('100%');

    } else {
     $(offCanvas).width(setting.offCanvasWidth);
    }

    var mainLink = $(".dropdown-items").children("li");

    //getting the width of main items shown in the menubar
    menuItemsWidth = 0;
    for (var w = -1; w < mainLink.length; ++w) {

     menuItemsWidth += $(mainLink).eq(w).width();

     if (menuItemsWidth >= devWidth && devWidth > 480) {
      $(mainLink).eq(w).css({
       'display': 'none',

      });

     } else {
      $(mainLink).eq(w).css({
       'display': '', //default

      });

     }


    };

   } //reponsive


   function $div() {
    return document.createElement("div");
   }


  }); //end plugin
 };

})(jQuery);
/*   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */

Leave your reply.
EmoticonEmoticon

This Newest Prev Post