Site hosted by Build your free website today!

You Are Here: Home » JavaScripts » dtree
Skip Navigation

» Script: dTree

© 2001, Geir Landrö, dTree Page


I came across this script while looking for a tree-style menu for a client of mine. This one is brilliant.


The first thing you want to do is save the following code as a file somewhere where you can find it. Clicking the following link will show you the source. From there, you can copy it into your text-editor and save it.

dtree.js (Just the JavaScript library) (Code, icons and demo)

Next thing you want to do is include it in the <HEAD> tag as a JavaScript Library.

<script language="JavaScript" type="text/javascript" src="dtree.js"></script>

Creating A New Instance Of dTree

You need to create a new instance of the dTree() object. Using a variable (in this case, "d"), you create the object by passing the name of the variable (soon to be the object) as the parameter.

<script language="JavaScript" type="text/javascript">

var d = new dTree('d');


Setting Up And Drawing The Tree

To add nodes to the tree, you use the obj.add() function. The following is a list of parameters that can be called (in this order):

Name Type Description
id Number Unique identity number. (Required)
pid Number Number refering to the parent node. The value for the root node has to be -1. (Required)
name String Text label for the node. (Required)
url String Url for the node.
title String Title for the node.
target String Target for the node.
icon String Image file to use as the icon. Uses default if not specified.
iconOpen String Image file to use as the open icon. Uses default if not specified.
open Boolean Is the node open.

See the example below:

<script language="JavaScript" type="text/javascript">

// Create dTree object
d = new dTree('d');

d.add(0, -1, 'My Computer');
d.add(1, 0, 'Boot Drive (C:)', '', '', '', '../img/tree_drive.gif', '../img/tree_drive.gif');
        d.add(4, 1, 'Documents and Settings');
                d.add(9, 4, 'File 1');
                d.add(10, 4, 'File 2');
                d.add(11, 4, 'File 3');
        d.add(6, 1, 'Windows');
                d.add(13, 6, 'File 1');
                d.add(14, 6, 'File 2');
                d.add(15, 6, 'File 3');
d.add(2, 0, 'CD-ROM (D:)', '', '', '', '../img/tree_cd.gif', '../img/tree_cd.gif');
d.add(3, 0, 'Recycle Bin', '', '', '', '../img/tree_trash.gif');

// Draw the tree to the screen


Basic Features

The three most common features of dTree are openAll(), closeAll(), and openTo().

openAll() does exactly what it seems it does: it opens every single node of the tree. Inversely, closeAll() closes every single node of the tree.

openTo() will open the tree to a specific node, and (optionally) can highlight that node. openTo() has two parameters. The first is the ID of the node (integer). This tells dTree where to open the tree to. The second (optional) parameter is a boolean value telling dTree whether or not to highlight that node. An example can be seen below.

<!-- Open and Close All -->
<a href="#" onclick="d.openAll();">open all</a>
<a href="#" onclick="d.closeAll();">close all</a>

<!-- "Photoshop.exe" node has an ID of 26 -->
<a href="#" onclick="d.openTo(26);">open to photoshop.exe</a>


open all | close all | open to photoshop.exe

Fine-Tuning With CSS

The following is a default CSS stylesheet for use with this menu tree. This assumes that the tree is called within a container with a classname of "dtree".

<style type="text/css">
.dtree {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	white-space: nowrap;
.dtree img {
	border: 0px;
	vertical-align: middle;
.dtree a {
	color: #333;
	text-decoration: none;
.dtree a.node, .dtree a.nodeSel {
	white-space: nowrap;
	padding: 1px 2px 1px 2px;
.dtree a.node:hover, .dtree a.nodeSel:hover {
	color: #333;
	text-decoration: underline;
.dtree a.nodeSel {
	background-color: #c0d2ec;
.dtree .clip {
	overflow: hidden;

Advanced Features

dTree has some more advanced features included in its API. These features are documented on the dTree API documentation page. Check it out to access the full flexibility of this script.


» Suck-O-Meter

At your option, you may use this Suck-O-Meter to let me know what you think about this script or documentation. If you want to let me know how to make it better, you need to do just that. Things like "It sucks", or "It doesn't work" don't tell me anything. Be articulate. Be specific. If you're going to comment, please say something understandable.

All fields are required!



Rate it:
 Not Sucky
 Not Very Sucky
 Kinda Sucky
 Really Sucky

How can we make it better?