This time I will share jQuery Plugin and tutorial about Material Design Dropdown Menu Plugin For jQuery – menu.js, hope it will help you in programming stack.
menu.js is a very small jQuery plugin for creating a Material Design inspired dropdown / toggle menu that allows your users to select one of a number of options.
How to use it:
1. Load jQuery library together with the menu.min.css
and menu.min.js
in the html page.
1 |
< link rel = "stylesheet" href = "/path/to/menu.min.css" > |
2 |
< script src = "/path/to/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/menu.min.js" ></ script > |
2. Create a menu toggle link like this:
1 |
< a href = "javascript:;" class = "toggle" id = "menu-toggle1" > |
2 |
< i class = "material-icons" >more_vert</ i > |
3. Create an HTML unordered list element that holds the options. Include a data-menu-toggle
attribute whose value matches the id attribute of the trigger element.
04 |
data-menu-toggle = "#menu-toggle1, #menu-toggle2" |
07 |
< a href = "#" >Duis aute irure dolor</ a > |
09 |
< li class = "menu-separator" ></ li > |
11 |
< a href = "#" >Lorem ipsum dolor sit amet</ a > |
14 |
< a href = "#" >Consectetur adipisicing elit</ a > |
17 |
< a href = "#" >Tempor incididunt ut</ a > |
19 |
< li class = "menu-separator" ></ li > |
21 |
< a href = "#" >Excepteur sint</ a > |
4. Initialize the plugin and done.
1 |
$( '[data-menu]' ).menu(); |
5. Customize the dropdown menu in the SCSS:
06 |
$menu-separator: #eee ; |
07 |
$menu-item-hover: #eee ; |
09 |
$menu-link: $menu-color; |
10 |
$menu-link-hover: #444 ; |
Change log:
2017-03-04
- Added new settings variables
2016-11-24
- Fixed prevention of default behavior on toggle element
This awesome jQuery plugin is developed by eumatheusgomes. For more Advanced Usages, please check the demo page or visit the official website.