Collapsible CSS Tree Menu

You can create a collapsible/expandable tree and style it with css. DBTree will generate the HTML code in the form of an unordered list (UL/LI-tags).

In order to have the unordered HTML list behave like a collapsible tree, you have to include the small javascript file "dbtree.js"

By using the attribute "linkparent" you can choose whether the folders should have also a link or not. Default for this attribute is "false"

Take the code below to create a collapsible tree like here. And download the images here (right-click, save target as): folder closedfolder openeddocument

Page Header

<head>
<script src="dbtree.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

DBTree Configuration

<cf_dbtree
instancename="id of the menu"
datasource="name of the datasource"
table="name of the database table"
action="get"
type="clicktree"
url_type="db"
url="column name"
id="column name"
parent="column name"
contentfield="column name"
titlefield="column name">

CSS of this Example