jquery.treemenu.js
treeMenu - simple jQuery plugin. Add togglers to ul > li > * structure
Example
https://xevin.ru/treemenu-js-examples/
https://codepen.io/xevin/pen/zNJQBo
Installation
Download jquery.treemenu.js and jquery.treemenu.css files
or
install via yarn
yarn add jquery.treemenu.js install via npm
npm install jquery.treemenu.js install via bower
bower install treemenu.js Usage
- include jQuery
<script src="jquery.min.js" type="text/javascript"></script>- include treeMenu script and styles in your document
<script src="jquery.treemenu.js" type="text/javascript"></script> <link href="jquery.treemenu.css" rel="stylesheet" type="text/css">- Create tree
<ul class="mytree"> <li><a href="/transport/">Transport</a> <ul> <li><a href="/transport/hovertanks">Hover tanks</a></li> <li><a href="/transport/quadbikes">Quad bikes</a></li> <li><a href="/transport/ecars">Electro cars</a></li> </ul> </li> <li><a href="/weapons/">Weapons</a> <ul> <li><a class="active" href="/weapons/knives">Knives</a></li> <li><a href="/weapons/grenades">Grenades</a></li> <li><a href="/weapons/lasers">Lasers</a></li> </ul> </li> <li><a href="/suits/">Suits</a></li> </ul>- Attach treeMenu when the document is loaded
$(document).ready(function(){ $("ul.mytree").treemenu(); });Options
- delay - open/close animation delay. Default == 0
- openActive - open all trees that contains element with activeSelector class. Default == false
- closeOther - at opening some tree, the other will be closed. Default == false
- activeSelector - class selector name for active elements. Default == '.active'
Use options:
$("ul.mytree").treemenu({ 'delay': 300, 'closeOther': true, 'activeSelector': '.active', 'openActive': true });
