Categories:

Home / Free JavaScripts / Menu and redirection / Here

Cut & Paste Folding Treeview Menu

Credit: YUI/ JavaScript Kit

Description: This is an versatile folding Treeview menu using YUI's treeview control. It lets you  define a collapsible tree with support for arbitrary number of levels, plus the ability to make any node a link with it! YUI may not be the easiest thing to work with for beginners, which is why we've created a custom function on top of it to simply the process of creating a tree, adding levels, and making a node a link etc. All you have to do is call one function. There's no stopping you now!

Example:

Directions: Just download the below zip file, and refer to the source inside demo.htm. It contains the same 3 demos as above.

You define a treeview menu simply by calling the function "jktreeview()", for example:

<!-- TreeView Demo 1 //-->
var pinetree=new jktreeview("tree1")
pinetree.addItem("JavaScript Kit", "", "http://www.javascriptkit.com")
pinetree.addItem("Free Scripts", "", "http://www.javascriptkit.com/cutpastejava.shtml")
var branch3=pinetree.addItem("References") //A TREE BRANCH WITH NO URL FOR ITSELF
    pinetree.addItem("JavaScript Reference", branch3, "http://www.javascriptkit.com/jsref/") //Add this item to branch3
    pinetree.addItem("DOM Reference", branch3, "http://www.javascriptkit.com/domref/") //Add this item to branch3
    pinetree.addItem("CSS Reference", branch3, "http://www.javascriptkit.com/dhtmltutors/cssreference.shtml") //Add this item to branch3
pinetree.addItem("JavaScript Tutorials", "", "http://www.javascriptkit.com/javatutors/")
pinetree.treetop.draw(); //REQUIRED LINE: Initalize tree

Enjoy!


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.