TOX - T Object
With TObject.Tree you can make a tree based navigation like Windows Explorer easily.
It is very easy to use, unobtrusive and lightweight (1.5kb)
Example:
Click on the T Object folder and after, click on the List folder.How to use it:
First, load the script.
<script src="./src/t.tree.js" type="text/javascript"></script>
<script type="text/javascript">
// low level onload. just an example;
window.onload=T.Tree.init;
</script>;
p.s.: You may call T.Tree.init() function after the unordered list is loaded.Second, make your unordered list.
Third, you must know that the element that toggles the list is always the <li> element (before every ul) so, in that case:
<div>
<ul class="treelist">
<li><a href="#">T Object</a> <--- li button
<ul>
<li>List <--- li button
<ul>
<li><a href="#">Tree</a></li>
<li><a href="#">Tab</a></li>
<li>Drag</a></li>
</ul>
</li>
<li><a href="">Edit</a></li>
</ul>
</li>
<li><a href="#">License</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Now, you must know all <ul> tags that has "treelist" class is going to be a tree list.
After the transformation, the <li> button receive a class named "closed" or "opened" and
all other <li> receive a class named "static".
if you needed to change these names, you can edit the .js file or reset these atributes:
T.Tree.treeClass = "treelist2"
T.Tree.closedClass = "closed2"
T.Tree.openedClass = "opened2"
T.Tree.staticClass = "static2"