vmenu is a small accordion menu plugin for jQuery/Zepto that creates a multi-level, vertical, spanning/collapsed navigation menu from nested HTML lists.

multi level accordion menu jquery, responsive multi level accordion menu plugin, accordion menu with submenu, accordion vertical menu example

How to make use of it:

1. Load the jQuery vmenu plugin stylesheet for basic menu styles.

<link rel="stylesheet" href="css/vmenuModule.css">

2. Create a multilevel accordion list using Nested Html Unordered Lists.

<div class="u-vmenu">
  <ul>
    <li> <a href="#">Item 1</a>
      <ul>
        <li><a href="#">Subitem 1</a> </li>
        <li> <a href="#">Subitem 2</a>
          <ul>
            <li><a href="#">Subitem 1</a>
              <ul>
                <li><a href="#">Subitem 1</a> </li>
                <li><a href="#">Subitem 2</a> </li>
                <li><a href="#">Subitem 3</a> </li>
                <li><a href="#">Subitem 4</a> </li>
              </ul>
            </li>
            <li><a href="#">Subitem 2</a> </li>
            <li><a href="#">Subitem 3</a> </li>
            <li><a href="#">Subitem 4</a> </li>
          </ul>
        </li>
        <li><a href="#">Subitem 3</a> </li>
        <li> <a href="#">Subitem 4</a>
          <ul>
            <li><a href="#">Subitem 1</a> </li>
            <li><a href="#">Subitem 2</a> </li>
          </ul>
        </li>
        <li><a href="#">Subitem 5</a> </li>
      </ul>
    </li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="#">Subitem 1</a> </li>
        <li><a href="#">Subitem 2</a> </li>
        <li><a href="#">Subitem 3</a> </li>
        <li><a href="#">Subitem 4</a> </li>
      </ul>
    </li>
    <li><a href="#">Item 3</a>
      <ul>
        <li><a href="#">Subitem 1</a> </li>
        <li><a href="#">Subitem 2</a> </li>
        <li><a href="#">Subitem 3</a> </li>
        <li><a href="#">Subitem 4</a> </li>
        <li><a href="#">Subitem 5</a> </li>
        <li><a href="#">Subitem 6</a> </li>
      </ul>
    </li>
    <li><a href="#">Item without subitems</a> </li>
  </ul>
</div>
</div>

3. The jQuery library / Zepto loads the jQuery vmenu plugin scrip.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/vmenuModule.js"></script>

4. Initialize the plugin.

$(".u-vmenu").vmenuModule({
  Speed: 200,
  autostart: true,
  autohide: true
});

Smooth Multilevel Accordion Menu, vmenu Plugin/Github

See Demo And Download

Official Website(fangyongbao): Click Here

This superior jQuery/javascript plugin is developed by fangyongbao. For extra advanced usage, please go to the official website.