A Responsive jQuery Dropdown Navigation Menu

The jquery menu is a fully responsive, mobile-friendly, multi-level dropdown menu is written in JavaScript (jQuery) and CSS / CSS3.

jquery responsive multi level dropdown menu, jquery drop down menu slide effect, jquery dropdown navigation menu, jquery multi level dropdown menu, responsive dropdown menu jquery

Features:

It allows you to add menu items dynamically via JavaScript.
It reveals sub-menus when hovering over parents.
Converts the dropdown menu into a vertical accordion menu in mobile view.
Easy to customize with your own CSS.

How to make use of it:

1. Load the wanted jQuery library and Material Icon within the doc.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Load the Dropdown Navigation’s JavaScript and Stylesheet within the doc.

<link rel="stylesheet" href="dist/style.css" />
<script src="app.js"></script>

3. Define your menu objects in a JS array as displayed below.

let menuList = [
    {
        title: "Home",
        url: "#"
    },
    {
        title: "About",
        url: "#"
    },
    {
        title: "SubMenu",
        url: "#"
    },
    {
        title: "SubMenu-1",
        url: "#"
    },
    {
        title: "SubMenu-1-1",
        url: "#"
    },
    {
        title: "SubMenu-1-2",
        url: "#"
    },
    {
        title: "SubMenu-2",
        url: "#"
    },
    {
        title: "Contact",
        url: "#"
    }
];

4. Code the HTML structure for the dropdown navigation.

<header>
  <nav class="sd-nav-menu">
    <div class="sd-menu-header">
      <div class="sd-desktop-menu">
      </div>
      <button class="sd-menu-toggle">
        <i class="material-icons">menu</i>
      </button>
    </div>
    <div class="sd-mobile-menu">
    </div>
  </nav>
</header>

5. Initialize the plugin and append the menu checklist to the dropdown navigation.

let $ = jQuery;
    $(".sd-desktop-menu").addMenu(menuList);
    $(".sd-mobile-menu").addMenu(menuList);
    $().mobileMenuInit();

Dynamic Mobile-friendly Dropdown Navigation, jquery-menu Plugin/Github, jquery submenu dropdown, responsive drop down menu with submenu, how to create drop down menu in html using jquery