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.

1. Load the stylesheet jquery-simple-menu.css for the basic styling of the dropdown menu.

<link rel="stylesheet" href="dist/jquery-simple-menu.css">

2. 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>

3. 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>

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

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

5. Generate a vertical dropdown menu instead.

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

6. Revel the sub menu items on hover.

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

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