Tree Menu Items - Product Info

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. It has the following structure:

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

text

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

To hide the item add '#' symbol before text.
For example:
        |||#My item - item is hidden

To set a default selected item add '>' symbol before text:
        |||>My item - item is selected

link

The link of an item. You can specify both direct link to your page and Javascript code.
For example:

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

Sometimes when you have pages in different 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.
To avoid such a problem you can use the special menu parameter:

        var tpathPrefix_link = "global_prefix";

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

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

        So, the item link will be transformed to:

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

iconNormal, iconOver, iconExpanded

Icons of an item: icon in normal state, icon in mouseover state, icons in expanded state.
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 determined 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 putting a pointer over an item.

target

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

Disabled items
If the target is "_" the item is disabled.
You can assign a font color for all disabled items using the following menu parameter:

var tfontColorDisabled = "#AAAAAA";

itemStyleInd

Index of an individual item style, >= 0.
Using this parameter you can assign individual styles to each item.
See how to create individual item styles.

itemXPStyleInd

Index of an individual submenu style, >= 0.
Use this parameter to assign individual styles to each submenus.
See how to create individual XP item styles.

You can move all data from data-tree.js file within <script></script> tags of your html page.
It can be helpful when you generate 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.

jsFilename

The name of .js file on the server that contains tmenuItems for the submenu.

Bootstrap Panel Tabs Bootstrap Media queries Using \| Bootstrap Select Menu \| Bootstrap Tabs Styles \| Bootstrap Multiselect Set \| Bootstrap Toggle Collapse \|
Copyright (c) 2009, Deluxe-Menu.com	Home \| Product Info \| Samples \| Download \| Purchase \| FAQ \| Site Map \|
All rights reserved.	icon font \| bootstrap navbar template \| bootstrap buttons \| easyhtml5video.com \| free bootstrap templates