SEO-friendly Dropdown Navigation Plugin - jquery-simple-menu.js

A simple, SEO-friendly navigation plugin that converts nested HTML unordered lists into a multi-level, horizontal or vertical dropdown menu using CSS flexbox and a little bit of JavaScript.

How to use it:

1. Create nested HTML lists for the dropdown menu.

<ul id="example">
  <li>
    <a href="#Menu1">Menu 1</a>
    <ul class="submenu">
      <li><a href="#Menu1-1">Menu 1-1</a></li>
      <li><a href="#Menu1-2">Menu 1-2</a></li>
      <li><a href="#Menu1-3">Menu 1-3</a></li>
    </ul>
  </li>
  <li>
    <a href="#Menu2">Menu 2</a>
    <ul class="submenu">
      <li><a href="#Menu2-1">Menu 2-1</a></li>
      <li><a href="#Menu2-2">Menu 2-2</a></li>
      <li><a href="#Menu2-3">Menu 2-3</a></li>
    </ul>
  </li>
</ul>

2. Load jQuery library and the JavaScript jquery-simple-menu.js in the html file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="dist/jquery-simple-menu.js"></script>

3. Attach the function to the top list. That's it.

$('#example').simpleMenu();

4. Generate a vertical dropdown menu instead.

$('#example').simpleMenu({
  align: 'vertical'
});

5. Revel the sub menu items on hover.

$('#example').simpleMenu({
  autoOpen: true
});

6. Keep the menu open when an item is clicked. Default: false.

$('#example').simpleMenu({
  keepOpen: true
});

7. Enable the context mode to oepn the dropdown menu via right click.

$('#example').simpleMenu({
  context: '#container'
});

8. Set the checkable sub menu.

$('#example').simpleMenu({
  checkable: 'ul:first'
});

Changelog:

v0.4.1 (2019-11-09)

• Make inactive when clicked root menu

v0.4.0 (2019-10-21)

• Support touch device.
• Bundle css with js.

v0.3.0 (2019-10-16)

• Fix menu handler and css.
• Fix event namespace.
• Destroy existing instance on initialization.

v0.2.1 (2019-05-20)

• Remove stopPropagation call

2019-05-02

• Add options: context, checkable, keepOpen

---

This awesome jQuery plugin is developed by kanety. For more Advanced Usages, please check the demo page or visit the official website.