Apycom Home   Tree Menu Home   How to Setup   Parameters   Purchase   Download   Contact 
Apycom Software: apycom.com Apycom's DHTML Tree Menu   version 2.0
Samples:     Blue  |     Silver  |     Olive  |     Orange  |     Green  |     Red  |     Standard Tree  |

See also:   What's New  |   How To Setup  |   Parameters  |   Menu Items  |   Individual Styles  |


Menu Items

Menu data are placed within data.js file. This file contains:
1. Menu parameters
2. Menu items and styles
3. Function for a menu initialization (apy_tmenuInit())

Menu items have the following structure:

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

  text

Item text.
To set a level of the item add "|" symbols before text. For example:

    ["|||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

Item link.
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: http://mysite.com/mydir/mypage.html

  iconNormal, iconOver, iconExpanded

Item icons: 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 will be:
    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

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

If the target is "_" the item is disabled.
You can assign a font color for all disabled items using the following 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 item style for titles of submenus in XP-style, >= 0.
Using this parameter you can assign individual styles to each submenu title in XP-style.
See how to create individual XP item styles.


You can move all data from data.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.js file the script won't work.
github pages | responsive menu | website designer | bootstrap popup window | css menu