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.