| 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 |
Individual Item Styles
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()) Individual item styles are special menu parameters (arrays) that you can assign to each item of the menu. Using these styles you make your menus more attractive and more convenient. var tstyles = [ ["paramName=value1", "paramName=value2", "paramName=value3", ...], // style with index 0 ["paramName=value3", "paramName=value4", "paramName=value5", ...], // style with index 1 ... ]; Each style can accept the following item parameters:
paramName=value | Description
titemBackColor=#AA5500 | Normal and mouseover colors of a background.
titemBackImage=back.gif | Normal and mouseover background images.
tfontColor=#000000,#FFFFFF | Normal and mouseover font colors.
tfontStyle=bold 12px Arial | Font style.
tfontDecoration=underline,none | Normal and mouseover font decorations. Available values: none, underline, line-through, overline.
Once you created item styles you can assign them to menu items. For example: var tstyles = [ ["titemBackColor=#AA4400,#FF6600", "tfontDecoration=none,underline"], // style 0 ["titemBackColor=#000000,#FFFFFF", "tfontColor=#FFFFFF,#000000"], // style 1 ["fontStyle=bold 12px Arial,Helvetica", "titemBackImage=back1.gif,back2.gif"], // style 2 ]; var tmenuItems = [ ["Home", "index.html", "myicon1.gif", "myicon2.gif", "myicon3.gif", "Home Page Tip", "_self", "2"], // assign style 2 ["About", "about.html", "myicon4.gif", "myicon5.gif", "myicon6.gif", "About Us Tip", "_self", "0"], // assign style 0 ["Write Us", "mailto:mymail@mymail.com", "", "", "", "Write Us Tip", "", "1"], // assign style 1 ];
Individual XP Item Styles
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()) Individual XP item styles are special menu parameters (arrays) that you can assign to submenus titles in XP-style: var tXPStyles = [ ["paramName=value1", "paramName=value2", "paramName=value3", ...], // style with index 0 ["paramName=value3", "paramName=value4", "paramName=value5", ...], // style with index 1 ... ]; Each submenu title can accept the following parameters:
paramName=value | Description
tXPTitleBackColor=#0000FF | Normal and mouseover colors of a title background.
tXPTitleBackImg=titleback.gif | Normal and mouseover background images of a title.
tXPTitleLeft=left.gif | Image of a left border of a title. Used when titles have no icons.
tXPTitleLeftWidth=4 | Width of a left border of a title.
tXPExpandBtn=exp1.gif,exp2.gif,col1.gif,col2.gif | Button images within a title. 4 states: - expanded-normal - expanded-mouseover - collapsed-normal - collapsed-mouseover
Once you created individual styles for XP titles you can assign them to menu items. For example: var tXPStyles = [ ["tXPExpandBtn=exp1.gif,exp2.gif,col1.gif,col2.gif", "tXPTitleBackImg=titleback.gif"], // XP style 0 ["tXPTitleBackColor=#D9DAE2", "tXPTitleBackImg=titleback2.gif"], // XP style 1 ]; var tmenuItems = [ ["First XP Submenu", "", "titleicon.gif", "", "", "Title Tip", "", "0"], // assign XP style 0 ["|Item 1"], ["|Item 2"], ["|Item 3"], ["Second XP Submenu", "", "titleicon2.gif", "", "", "Title Tip", "", "1"], // assign XP style 1 ["|Item 4"], ["|Item 5"], ["|Item 6"], ];