Copyright (c) 2004, Apycom Software 
Tree-menu parameters Apycom software: apycom.com

Examples:   
  [XP-style Blue]     [XP-style Silver]     [XP-style Olive]     [Tree-view XP Icons]  
  [XP-style Orange]     [XP-style Green]     [XP-style Red]  


 
Parameter Comment
 
Added in v1.34
Default expanded item

You can expand items you want by default.
Syntax:
     var tmenuItems = [
        ["+itemText", ...]
     ];

Symbol '+' means this item is expanded.

See the example.
 
Item visibility

You can specify a visibility for each item.
Syntax:
     var tmenuItems = [
        ["#itemText", ...]
     ];

Symbol '#' means this item is hidden.

Also you can change item visibility dynamically by using apy_tshowItem() function:

     apy_tshowItem(menuN, itemN, visible);

Where:
     menuN - menu number on a page >=0;
     itemN - item number in the specified menu >=0;
     visible = true/false - item visibility.

See the example.
 
var tlevelDX = 20; Item X offset relatively a root item.
var texpandItemClick = 1; 1 - expand item within item click, 0 - expand item withing [+]-button click. Default is 0.
See the example.
 
var tsaveState = 1; 0 - disable state saving. 1 - enable state saving.
If 1, menu saves a current state for a next visit.
See the example.
var tsaveMenuN = 0; Menu number on a page to be saved.
var tsavePrefix = "myName"; Individual string for each menu on a page to be saved. Must be not empty.
 
Added in v1.30
var tblankImage = "img/blank.gif"; Path to blank image (must be 1x1, transparent).
var tmenuWidth = number/string; Menu width (px or %). If "" - fits to largest item. If menu width after creating will be more than this value, horizontal scrollbar will appear.
var tmenuHeight = number/string; Menu height (px or %). If menu height after creating will be more than this value, vertical scrollbar will appear.
If 0 - sets menu height automatically.
 
var tabsolute = 1; 0 - relative position, 1 - absolute position.
var tleft = 20; X coordinate of top-left menu corner, if absolutePos = 1.
var ttop = 120; Y coordinate of top-left menu corner, if absolutePos = 1.
 
var tfloatable = 1; 1 - menu "floats" on window scrolling staying always visible.
var tfloatIterations = 6; Defines speed of floating. More iterations - less speed.
 
var tmovable = 0; 1 - you can drag the menu by using top spacer.
var tmoveImage = "img/move.gif"; Image of the drag spacer.
var tmoveImageHeight = 12; Height of drag spacer
 
var tfontStyle = "bold 9pt Verdana"; Font style.
var tfontColor = ["#444444","#FFFFFF"]; Normal and mouseover font color.
var tfontDecoration = ["none","none"]; Normal and mouseover font color decoration ("none", "underline", "line-through", "overline").
 
var titemBackColor = ["#FFFFFF","#4792E6"]; Normal and mouseover color of item background.
var titemAlign = "left"; Alignment of item text.
var titemBackImage = ["bkgr1.gif","bkgr2.gif"]; Normal and mouseover background image.
var titemCursor = "default"; Mouseover cursor ("hand", "default", "move", ...).
var titemHeight = 22; Item height.
var titemTarget = "_blank"; Default target for all items ("_self", "_blank", "_parent", "_top", ...). If "" - target is "_self".
var ticonWidth = 16; Item icon width.
var ticonHeight = 16; Item icon Height.
var ticonAlign = "left"; Alignment of item icon ("left", "right")
 
var tmenuBackImage = ""; Menu background image.
var tmenuBackColor = "#FFFFFF"; Menu background color.
var tmenuBorderColor="#CCCCCC"; Menu border color.
var tmenuBorderStyle = "solid"; Menu border style ("none", "solid", "double", "dotted", "dashed", "groove", "ridge").
var tmenuBorderWidth = 0; Menu border width.
 
var texpanded = 0/1; 1 - all menu items are expanded.
var texpandBtn = ["img/expand1.gif", "img/expand2.gif", "img/collapse1.gif"]; Expand button images: normal, mouseover and when item submenu expanded.
var texpandBtnW = 9; Expand button width.
var texpandBtnH = 9; Expand button height.
var texpandBtnAlign = "left" Alignment of expand button ("left", "right").
 
var tpoints = 0; 1 - display lines, that connecting expand buttons.
var tpointsImage = "img/pointsh.gif"; Horizontal line image.
var tpointsVImage = "img/pointsv.gif"; Vertical line image.
var tpointsCImage = "img/pointsc.gif"; Corner image.
 
var tXPStyle = 1; 1 - enable XP-style menu.
var tXPIterations = 5; Expanding/collapsing speed. More iterations - less speed.
var tXPTitleTopBackColor = ""; Top background color of XP-style title. Preffered value - "".
var tXPTitleBackColor = "#265BCC"; Background color of XP-style title.
var tXPTitleLeft = "img/xptitleleft.gif"; Left border image of XP-style title.
var tXPExpandBtn = ["img/exp1.gif","img/exp2.gif", "img/coll1.gif","img/coll2.gif"]; Expand button for XP-style title.
States: expanded-normal, expanded-mouseover, collapsed-normal, collapsed-mouseover.
var tXPBtnHeight = 25; Expand button height.
var tXPTitleBackImg = "img/xptitle.gif"; Background image of XP-style title.
var tmenuItems = [[..]];

format:
[item_label, item_link, normal_icon, mouseover_icon, expanded_icon, tooltip, item_target, item_style, XP_title_style]

example:
var tmenuItems = [
    ["Home","testlink.html","icon.gif","iconover.gif", "iconexp.gif", "Home Tip",,"1"],
    ["|Our Products","testlink.html","icon1.gif","icon2.gif","","Our Products Tip","_blank"],
];

  • item_label:
    @ Separator is "-";
    @ Sub item text starts with "|" symbol;

  • item_style and XP_title_style:
    @ You can use individual styles for items.
    @ XP_title_style works if XP-style menu is enabled.
    @ item_style and XP_title_style are the indexes of required style within style arrays, defined in titemStyles and tXPStyles variables, example:

    var titemStyles = [
        ["fontStyle=normal 9pt Tahoma","fontColor=#000000,#9999ff"],
        ["itemBackImage=img/iconback3.gif,img/iconback4.gif"],
    ];

    var tXPStyles = [
        ["tXPTitleBackColor=#D0DAF8", "tXPExpandBtn=img/xpexpand3.gif,img/xpexpand4.gif,img/xpcollapse3.gif,img/xpcollapse4.gif", "tXPTitleBackImg=img/xptitle2.gif"],
    ];

How to setup
Apycom Tree-menu comes with two files that can be found in the "js/" subdirectory in this download:
    apytmenu.js - menu engine;
    tmenudata.js - data file with menu parameters (this file may be renamed, but must include the '.js' extension).

Place these files to any folder of your html project and add a reference to the files within your HTML page. You can use both absolute and relative coordinates to position the menu.

Absolute position
Paste the following code into <head> tag:

<!-- Apycom Tree Menu -->
<noscript><a href=http://dhtml-menu.com/>DHTML Tree Menu</a></noscript>
<script type="text/javascript" language="JavaScript1.2" src="yourdir/apytmenu.js"></script>
<script type="text/javascript" language="JavaScript1.2" src="yourdir/tmenudata.js"></script>
<!-- (c) 2004, Apycom Software, apycom.com -->

and set coordinates of top-left menu corner in the data file, example:

var tabsolute = 1;
var tLeft = 20;
var tTop = 120;

Relative position
Paste the following code into <head> tag:

<!-- Apycom Tree Menu -->
<noscript><a href=http://dhtml-menu.com/>DHTML Tree Menu</a></noscript>
<script type="text/javascript" language="JavaScript1.2" src="yourdir/apytmenu.js"></script>
<!-- (c) 2004, Apycom Software, apycom.com -->

and paste the following code within your html page in a position you want the menu to appear:

<script type="text/javascript" language="JavaScript1.2" src="yourdir/tmenudata.js"></script>

For example into a table cell:

<table><tr>
<td><script type="text/javascript" language="JavaScript1.2" src="yourdir/tmenudata.js"></script></td>
</tr></table>

Purchase
This trial version of Apycom Tree-menu may be used for evaluation purposes only for a period of 30 days.
Evaluation use includes the review and or customization of the software on one local computer.
This software may not be placed on the internet or a local intranet site for viewing and or use by multiple persons.
The purchased version includes a license to place the software on publicly accessible web pages and does not display the trial version reminder.
Also you can purchase the Java source code of the software.
For more information see order page.