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.

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.

Must Read: Responsive Fancy Sidebar Navigation Menu With Icons

How to make use of it:

1. Load the jQuery library and Material Icon within 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.

<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 of the menu checklist to the dropdown navigation.

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

See Demo And Download

Official Website(Cover-UI): Click Here

This superior jQuery/javascript plugin is developed by Cover-UI. For extra Advanced Usage, please go to the official website.

Related Posts

Cookie-Consent-Using-Bootstrap

How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…

Bootstrap-Alert-Bootbox

Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

rich-text-editor-html5

Simple Web-Rich Text Editor That Can Export HTML

Rich Text Editor is a simple HTML export web text editor developed with the jQuery library, Bootstrap framework, and the iconic Font Awesome font. Editor Buttons: Undo…

modal-cxdialog-box-plugin

Modal Dialog Box Plugin Based On jQuery | cxDialog

cxDialog is a jQuery-based dialog plugin that supports custom appearance styles, is Zepto compatible, and is suitable for portable use. This jQuery plugin is used to generate…

Bootstrap-Markdown-Editor

Markdown Editor Based On The Ace And Bootstrap Editor | codeparlMarkdown

Bootstrap Markdown Editor is a jQuery plugin that helps you create a full-featured, customizable tag editor with Bootstrap, Ace Editor, Font Awesome, and Showdown.js. Requirements Bootstrap 4…