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
See Demo And Download
Official Website(Cover-UI): Click Here
This superior jQuery/javascript plugin is developed by Cover-UI. For extra Advanced Usages, please go to the official website.
Be First to Comment