Dynamic Mobile-friendly Dropdown Navigation In jQuery

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

Features:

• Allows you to dynamically add menu items via JavaScript.
• Reveals sub-menus when hovering over parents.
• Converts the dropdown menu into a vertical accordion menu in mobile view.
• Easy to customize using your own CSS.

See also:

• Best Responsive Menu jQuery Plugins
• Best Responsive Dropdown Menus
• Best Accordion Menu Components
• Best Off-canvas Mobile Menus
• Best Fullscreen Navigation Plugins
• Best JavaScript & CSS Responsive Menus
• Best Mobile-friendly Off-canvas Navigation Systems

How to use it:

1. Load the needed jQuery library and Material Icon in the document.

<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 in the document.

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

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

let menuList = [
    {
        title: "Home",
        url: "#"
    },
    {
        title: "About",
        url: "#"
    },
    {
        title: "Has SubMenu",
        url: "#"
    },
    {
        title: "_SubMenu-1",
        url: "#"
    },
    {
        title: "__SubMenu-1-1",
        url: "/blogger"
    },
    {
        title: "__SubMenu-1-2",
        url: "/blogger"
    },
    {
        title: "_SubMenu-2",
        url: "/templates"
    },
    {
        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 list to the dropdown navigation. Done.

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

---

This awesome jQuery plugin is developed by Cover-UI. For more Advanced Usages, please check the demo page or visit the official website.