@kanety/jquery-simple-menu
v0.4.1
Published
A jquery plugin for simple menu
Downloads
2
Readme
jquery-simple-menu
A jquery plugin for simple menu.
Dependencies
- jquery
Installation
Install from npm:
$ npm install @kanety/jquery-simple-menu --save
Basic usage
Build html as follows:
<ul id="menu">
<li>
<a href="#">Menu</a>
<ul style="width: 120px;">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</li>
</ul>
Then run:
$('#menu').simpleMenu();
Options
Open menu by mouse hovering:
$('#menu').simpleMenu({
autoOpen: true
});
Keep menu opened after clicking menu items:
$('#menu').simpleMenu({
autoOpen: true,
keepOpen: true
});
Change to vertical align:
$('#menu').simpleMenu({
align: 'vertical'
});
Checkable menu
$('#menu').simpleMenu({
checkable: '.checkable-submenu'
}).on('menu:checked', function(e, $li) {
...
}).on('menu:unchecked', function(e, $li) {
...
})
Context menu
<div id="container"></div>
<ul id="menu">
<li>
<a href="#">Menu</a>
<ul style="width: 120px;">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</li>
</ul>
$('#menu').simpleMenu({
context: '#container',
align: 'vertical'
});
Other example
Use button tag instead of a tag:
<ul id="menu">
<li>
<button>Menu</button>
<ul style="width: 120px;">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</li>
</ul>
$('#menu').simpleMenu();
License
The library is available as open source under the terms of the MIT License.