JQuery Autotree
JQuery Autotree is a 1-line 248-byte javascript I wrote to to create a
flexible tree-navigation style menu out of a standard UL-LI html list
structure.
DEMO
- TOP LEVEL MENU 1
- TOP LEVEL MENU 2 (has a sub-tree, CLICK)
-
- SUB MENU 1(has a sub-tree, CLICK)
-
- SUB SUB MENU 1(has a sub-tree, CLICK)
-
- SUB SUB SUB MENU 1
- SUB SUB SUB MENU 2
- SUB SUB MENU 2
- SUB MENU 2
- TOP LEVEL MENU 3
HOW YOU CAN USE IT
- Download the latest JQuery package
- Download the JQuery Autotree script
- Anywhere AFTER your JQuery include line, include the Autotree script:
<script type='text/javascript' src='autotree-min.js'></script>
- Have an unordered list (UL tag) somewhere on your page made up of
the following structure defined below, and assign it a class of
"autotree."
<ul class='autotree'>
<li>title of list item that triggers sublist A</li>
<li>
<ul>
<li>SUB MENU ITEM 1</li>
</ul>
</li>
</ul>
A working, stripped down demo can be found
here.
Change requests? bugs? Make a submission to my
contact form.