Press "Enter" to skip to content

Multilevel Vertical Accordion Menu/Navigation Plugin By jQuery or Zepto | vmenu

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.