Javascript Tree Menu by Deluxe-Tree.com
   
(c) 2006, DHTML-Tree
 
   
   
 
 

    Tree Menu Items

Menu items are placed within data-tree.js file.
This file contains:
1. Menu parameters
2. Menu items, individual styles and individual xp styles
3. Function for a menu initialization (dtree_init();)

Tree Menu Items

Tree Menu items is an array of arrays. This array has the following structure:

var tmenuItems = [
        [text, link, iconNormal, iconOver, iconExpanded, tip, target, itemStyleInd, itemXPStyleInd],
        [text, link, iconNormal, iconOver, iconExpanded, tip, target, itemStyleInd, itemXPStyleInd],
        ...
];


text

The text of an item.
Add "|" symbols before the item text to set a level of the menu item.
For example:
        Home - top-menu item with text "Home" (item level is 0).
        |||My item - 3rd level item with text "My item".

Add '#' symbol before item's text to hide the item.
For example:
        |||#My item - item is hidden

Add '>' symbol before text to set a default selected item:
        |||>My item - item is selected

link

The link of an item. You can set a direct link to your page or Javascript code.
For example:

        dir/mypage.html - direct link.
        javascript:alert('Hello world!') - Javascript code.

It is possible that if you have pages in various directories of your website, some of menu links may not work.
It happens because once you've loaded a page from the one path, the current path is changed to this one.
Use the special parameter to avoid such a problem:

        var tpathPrefix_link = "global_prefix";

After you set this parameter all menu links become absolute. For example:

        var tpathPrefix_link = "http://mysite.com/";
        var tmenuItems = [
        ["Item Text", "mydir/mypage.html", ...]

        After you set this parameter all menu links become absolute. For example:

        http://mysite.com/mydir/mypage.html

iconNormal, iconOver, iconExpanded

Icons of an item in normal state, mouseover state and expanded states.
Sometimes it's necessary to make all images paths absolute (for example, when you move all images into another directory and you don't want to re-create all paths).
You can use the special images prefix:

        var tpathPrefix_img = "global_prefix";

After you set this parameter all images paths become absolute. For example:

        var tpathPrefix_img = "http://mysite.com/images/";
        var tmenuItems = [
        ["Item Text", "mypage.html", "myicon1.gif", "myicon2.gif", "myicon3.gif", ...]

        So, images paths for this item will be transformed to:

        http://mysite.com/images/myicon1.gif
        http://mysite.com/images/myicon2.gif
        http://mysite.com/images/myicon3.gif

tip

The hint that will be shown after you hover over an item.

target

The target for an item link.
Available values: _self, _blank, _parent, _search, _top
You can set a frame name as the target parameter.

Disabled items
To create the disabled item set it's target to "_".
You can appoint a text color for all disabled items using the following menu parameter:

        var tfontColorDisabled = "#AAAAAA";

itemStyleInd

Index of an individual item style, >= 0.
Use this parameter to assign individual styles for each item.
See more info about individual item styles.

itemXPStyleInd

Index of an individual submenu style, >= 0.
You can use this parameter to assign individual styles to each submenu.
See how to use individual XP item styles.



You can move all data from data-tree.js file to your html page within <script></script> tags.
It can be helpful when you load items from a database using a server-side script (PHP, ASP, VB, etc.).

Notice
If you use a server-side script within data-tree.js file the script won't work.


   
Copyright (c) 2009, DHTML-Menu.com
Home  |  Product Info  |  Samples  |  Download  |  Purchase  |  FAQ  |  Site Map  |  Write Us
All rights reserved. parallax scrolling | web editor | free web editor | jquery slider | responsive slider