Lightweight Folding Menu Plugin For jQuery - treemenu.js

Lightweight Folding Menu Plugin For jQuery - treemenu.js
File Size: 6.86 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.