Lightweight Folding Menu Plugin For jQuery - treemenu.js

File Size: 6.86 KB
Views Total: 20525
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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><a href="#">jQuery</a>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">jQuery UI</a></li>
          <li><a href="#">jQuery Mobile</a></li>
      <li><a href="#">JavaScript</a>
          <li><a class="active" href="#">AngularJS</a></li>
          <li><a href="#">React</a></li>
          <li><a href="#">Backbone</a></li>
      <li><a href="#suits">Golang</a></li>
  <li><a href="#about">About</a>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Jobs</a>
          <li><a href="#jobs1">Job 1</a></li>
          <li><a href="#jobs2">Job 2</a></li>
          <li><a href="#jobs3">Job 3</a></li>

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

<script src="//"></script> 
<script src="jquery.treemenu.js"></script> 

4. Call the plugin on the Html list



v0.6.1 (2018-08-27)

  • fix selector



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


  • fixed an issue in openActive method


  • fix bug with closeOther option enabled


  • change toggle effect to slideToggle


  • don't add new span if it already exists


  • fixed styles.

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