| Apycom Home |  | Tree Menu Home |  | How to Setup |  | Parameters |  | Purchase |  | Download |  | Contact
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.