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.