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  |


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"],
];
bootstrap gallery | top website builders | website design software | Free Bootstrap Template | bootstrap navigation menu