Lightweight Folding Menu Plugin For jQuery - treemenu.js

treemenu.js is a super light jQuery plugin that turns nested Html lists into a collapsible tree menu like the tree folder structure.

How to use it:

1. Load the required jquery.treemenu.css stylesheet in the header.

<link href="jquery.treemenu.css" rel="stylesheet">

2. Create a nested Html list for the tree menu.

<ul class="tree">
  <li><a href="">Home</a></li>
  <li><span>Category</span>
    <ul>
      <li><a href="#">jQuery</a>
        <ul>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">jQuery UI</a></li>
          <li><a href="#">jQuery Mobile</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a class="active" href="#">AngularJS</a></li>
          <li><a href="#">React</a></li>
          <li><a href="#">Backbone</a></li>
        </ul>
      </li>
      <li><a href="#suits">Golang</a></li>
    </ul>
  </li>
  <li><a href="#about">About</a>
    <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Jobs</a>
        <ul>
          <li><a href="#jobs1">Job 1</a></li>
          <li><a href="#jobs2">Job 2</a></li>
          <li><a href="#jobs3">Job 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

3. Load the jquery.treemenu.js after jQuery library but before the closing body tag.

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

4. Call the plugin on the Html list

$(".tree").treemenu({delay:500}).openActive();

Changelog:

v0.6.1 (2018-08-27)

• fix selector

2017-06-08

• JS update

2016-11-24

• fix styles
• don't touch tree-empty el when use closeOther
• move fn.openActive() code to fn.treemenu()

2016-11-17

• fixed an issue in openActive method

2016-09-21

• fix bug with closeOther option enabled

2016-04-13

• change toggle effect to slideToggle

2016-04-12

• don't add new span if it already exists

2015-05-22

• fixed styles.

---

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