Animated Vertical Accordion Menu with jQuery and CSS3 - mtree.js

mtree.js is a jQuery plugin that enables you to create an animated vertical accordion menu based on jQuery velocity.js and CSS3 transitions. Click the '+' and '-' symbols to expand/collapse an accordion menu. Also can be used as a collapsible tree view system.

How to use it:

1. Include the jQuery Javascript library and jQuery mtree.js in your html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="mtree.js"></script>

2. Include the jQuery velocity.js for accelerated JS animations.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="mtree.js"></script>

3. Include the mtree.css in the head section of your page.

<link href="mtree.css" rel="stylesheet">

4. Create a multi-level accordion menu with using Html unordered list with the essential 'mtree' class and a theme class.

Built-in themes:

• bubba
• skinny
• transit
• jet
• nix

<ul class="mtree transit">

  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
  
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
  
  ...
  
</ul>

5. Setup the accordion menu.

• var collapsed = true: Start with collapsed menu (only level 1 items visible)
• var close_same_level = false: Close elements on same level when opening new node.
• var duration = 400: Animation duration should be tweaked according to easing.
• var listAnim = true: Animate separate list items on open/close element (velocity.js only).
• var easing = 'easeOutQuart': Velocity.js only, defaults to 'swing' with jquery animation.

---

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