Tree Menu Documentation

Contents

Placing a template in your web page

  1. Copy the files dmt.js, dmt_editor.js and dmt_data_file.js from the template directory to your web site's directory.
  2. Open your web page with a text editor.
  3. Copy this div tag into your web page where you would like it to appear.
  4. Copy these script tags just above the closing </body> tag found near the bottom of your web page.
  5. Save the web page.

Altering the structure of the menu

Add new item

Click the Add button and enter the label. The href and target fields are only required for leaf nodes. When you click ok it will be added to the bottom of the menu. You can then move the item into the desired position using the arrow buttons.

Edit existing item

Select the item and click edit. You can edit the label, href and target fields. You can also set any style settings that you would like the item to have different from the general settings, for the types of values that can be entered into each field see Example style values table below.

Delete item

Select the item and click delete.

Move existing item

Select the item you would like to move. Use the up and down arrow buttons to adjust the order it appears in the menu. Use the left and right arrows to adjust the level of the item.

Altering the style of the menu

Click the Properties button to open the Menu Properties editor.

There are four tabs named Main Container, Node, Sub Container and Leaf Node. The CSS settings with in each tab apply to the elements shown in the diagram below. For the types of values that can be entered into each field see Example style values table below.

Example style values

CSS Property Example Values
Border Width
Margin
Padding
Width
Height
10px
10em
0.4em
10% (Not Border Width)
auto (Width and Height only)
Border Color
Background Color
Color
blue
#0000FF
#00F
rgb(0, 0, 255)
rgb(0%, 0%, 0%)
Border Style none
dotted
dashed
solid
double
groove
ridge
inset
outset
Background Image url(images/background.png)
Background Repeat no-repeat
repeat
repeat-x
repeat-y
Z Index 5
Icon Image
Expanded Icon Image
images/icon.png
Font Family Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Font Size 12pt
16px
0.8em
Font Style normal
italic
oblique
Font Weight normal
bold
bolder
lighter
Text Decoration none
underline

Save changes to menu

Click the Save button and follow the instructions on the save window that pops up.

Turn editor on/off

When you installed the menu into your web page you copied two script tags. Open your web page in a text editor and scroll down to where you pasted those script tags. To turn the editor off the second script tag's src attribute needs to be set to dmt.js and to turn it back on it needs to be set to dmt_editor.js

Contact Us

If you have a problem with the tree menu that you can not find an answer to in the documentation or if the documentation is unclear at any point then please send an email to support@dhtmlmedia.com


[Copyright © 2007 dhtmlmedia.com - All rights reserved.]