FXsinus.com HOME Home of FX DHTML Web Menus

FX DHTML menu example Windows XP:









Most important settings for this menu:
Some not Windows XP typical styles on "click" event were added to show other features of FX menu like FontWeight and the ability to change bordercolors even "onclick" event. Click on the items to open their submenus. The menu uses two groupstyles and two itemstyles. Opera 5 and 6 don't support transparency for background-color properly, therefore this style looks a little bit different in these browsers. Whenever a background-color value is set to 'transparent' Opera 5 and 6 use the value defined in AlternateOpera5n6TransparencyColor (in group behaviour array) instead.
GroupInnerBgImageActive = 1, GroupInnerBgImageSrc = 'image/winxpbg.gif',
FirstMenuIsCommonHTML=0 (Like in the main navigation of FXsinus.com)
MenuOpensOnClickOrOnMouseOver=1. All submenus open "onclick"-event.
MenuClosesOnClick=1. MenuClosesOnMouseOut=1;
All "LinkURLs" were removed for this example.

Settings in the fx_array.js-file:

var fxnames=['example',4];
var webmastercheck=1; //set to 0 if everything works fine
var blankgif='image/1x1.gif';
var MSIEeffect=['Shadow(color=#C0C0C0, Direction=135, Strength=3)' ]



var groupstyle=[
,            //GroupBgImageActive
,            //GroupBgImageSrc
'#808080',   //GroupBgColorOff
1,           //GroupBorderWidth
1,           //GroupBorderLeft
1,           //GroupBorderTop
1,           //GroupBorderRight
1,           //GroupBorderBottom
1,            //GroupInnerBgImageActive
'image/winxpbg.gif',            //GroupInnerBgImageSrc
'#FFFFFF',   //GroupInnerBgColorOff
2,           //GroupInnerBorderWidth
1,           //GroupInnerBorderLeft
1,           //GroupInnerBorderTop
2,           //GroupInnerBorderRight
1,           //GroupInnerBorderBottom
0,           //AllowMenuWidthHeightDisaster
1,           //UseDifferentWidthsForMenu
0,           //UseDifferentHeightsForMenu
0,           //Group3DEffect
0,           //GapBetweenItems
]

var groupstyle2=[
,            //GroupBgImageActive
,            //GroupBgImageSrc
'#808080',   //GroupBgColorOff
1,           //GroupBorderWidth
1,           //GroupBorderLeft
1,           //GroupBorderTop
1,           //GroupBorderRight
1,           //GroupBorderBottom
,            //GroupInnerBgImageActive
,            //GroupInnerBgImageSrc
'#FFFFFF',   //GroupInnerBgColorOff
2,           //GroupInnerBorderWidth
2,           //GroupInnerBorderLeft
2,           //GroupInnerBorderTop
2,           //GroupInnerBorderRight
2,           //GroupInnerBorderBottom
0,           //AllowMenuWidthHeightDisaster
1,           //UseDifferentWidthsForMenu
0,           //UseDifferentHeightsForMenu
0,           //Group3DEffect
1,           //GapBetweenItems
]

var groupbehaviour=[
1, //MenuOpensOnClickOrOnMouseOver click:1, mouse:0
1, //MenuClosesOnClick
1, //MenuClosesOnMouseOut
,  //for future purpose
1, //MenuClosesIfMouseOverOtherItem
1, //MenuClosesIfClickOnOtherItem
,  //for future purpose
500,  //MenuDisplayDelay
1500, //MenuTimeDisappearGap
'#FFFFFF',  //AlternateOpera5n6TransparencyColor
1, //MenuPathStaysHighlited
1, //PositionIsRelativeOrAbsolute absolute:0 relative:1
1, //ActivationIntensity
,  //ScrollingFollowSpeed for future purpose
,  //ScrollingFollowRate for future purpose
,  //RightToLeftHebrew for future purpose
,  //FirstLineFrame for future purpose
,  //SecondLineFrame for future purpose
0,  //MainMenuExpandWidth
,  //MainMenuHorizontalPosition center:c right:r
,  //MainMenuVerticalPosition for future purpose
,  //MenuIsStaticVertical for future purpose
,  //MenuIsStaticHorizontal for future purpose
,  //IntelligentSmoothScrolling for future purpose
,  //TypeOfMenu (sideMenu,...) for future purpose
,  //RighClickMenuDisappearDelay  for future purpose
,  //ShowProductInfoFXsinus for future purpose
,  //DivIdForRelativePositioning for future purpose
0, //FirstMenuIsCommonHTML
500,//MenuZIndex
,   //EnableDragAndDrop for future purpose
,   //JavaScriptCommandOnAppear for future purpose
,   //JavaScriptCommandOnDisappear for future purpose
,   //JavaScriptFunctionToCallBeforeStart for future purpose
,   //JavaScriptFunctionToCallAfterBuild for future purpose
,   //JavaScriptFunctionToCallBeforeFirstOpen for future purpose
,   //JavaScriptFunctionToCallAfterCloseAll for future purpose
,   //WindowOnErrorFunctionActivate for future purpose
,   //DeactivateBrowserSupportForN4 for future purpose
,   //DeactivateBrowserSupportForIE4 for future purpose
,   //DeactivateBrowserSupportForOpera for future purpose
,   //DeactivateBrowserSupportForN6 for future purpose
,   //for future purpose
'pointer',//ChooseStandardCursor
,   //DisallowTextSelect for future purpose
'', //LinkTextStatusStandard
1,  //IntelligentSubMenuPositioningCorrection
,   //PreferredScreenResolutionHorizontal
,   //PreferredScreenResolutionVertical for future purpose
7,  //IntelligentSubMenuPositioningLeftcorr
0   //IntelligentSubMenuPositioningTopcorr for future purpose

]


var IndicatorArrowRightSubOpensRight=['image/fx_arrow01off.gif','image/fx_arrow01on.gif','image/fx_arrow01on.gif',11,12,2,3]
var IndicatorArrowRightSubOpensUp=[] //for future purpose
var IndicatorArrowRightSubOpensLeft=[] //for future purpose
var IndicatorArrowRightSubOpensDown=['image/fx_arrow01off.gif','image/fx_arrow01on.gif','image/fx_arrow01on.gif',11,12,2,3]
var IndicatorArrowRightSubOpensDownRight=[]

var itemstyle2=[
,//for future purpose
,//for future purpose
'Verdana',//FontFamilyOFF
'Verdana',//FontFamilyOn
'Verdana',//FontFamilyClick
,//for future purpose
,//for future purpose
,//for future purpose
8,//FontSizeOff
8,//FontSizeOn
8,//FontSizeClick
5,//PaddingLeft
2,//PaddingTop
'#000000',//FontColorOff
'#000000',//FontColorOn
'#808080',//FontColorClick
'normal',//FontBoldOff
'normal',//FontBoldOn
'bold',//FontBoldClick
'normal',//FontItalicsOff
'normal',//FontItalicsOn
'normal',//FontItalicsClick
'none',//TextDecorationUnderlineOff
'none',//TextDecorationUnderlineOn
'none',//TextDecorationUnderlineClick
,//LetterSpacing
0,//Item3DEffect
'#FFFFFF',//BorderColorOff
'#808080',//BorderColorOn
'#000099',//BorderColorClick
0,//BorderWidth
0,//BorderLeft
0,//BorderTop
0,//BorderRight
0,//BorderBottom
'#C0C0C0',//InnerBorderColorOff
'#6699CC',//InnerBorderColorOn
'#6699CC',//InnerBorderColorClick
9,//InnerBorderWidth
1,//InnerBorderLeft
1,//InnerBorderTop
1,//InnerBorderRight
1,//InnerBorderBottom
1,//BorderImageActive
,//BorderImageSrc
,//InnerBgImageActive
,//InnerBgImageSrc
0,//BgImageActive
'fx_fade01.gif',//BgImageSrc
'#FFFFFF',//BgColorOff
'#CDD8ED',//BgColorOn
'#CDD8ED',//BgColorClick
1,//IndicatorArrowRightActivate
IndicatorArrowRightSubOpensRight,//IndicatorArrowRightSubOpensRight
IndicatorArrowRightSubOpensUp,//IndicatorArrowRightSubOpensUp
IndicatorArrowRightSubOpensLeft,//IndicatorArrowRightSubOpensLeft
IndicatorArrowRightSubOpensDown,//IndicatorArrowRightSubOpensDown
IndicatorArrowRightSubOpensDownRight,//IndicatorArrowRightSubOpensDownRight
,//
,//
0,//LeftArrowActivate
'',//LeftArrowOffSrc
'',//LeftArrowOnSrc
,//LeftArrowClickSrc
14,//LeftArrowWidth
15,//LeftArrowHeight
2,//LeftArrowLeft
2,//LeftArrowTop
0,//for future purpose
0,//for future purpose
1//Item3dEffectIsAuto

]

var itemstyle=[
,//for future purpose
,//for future purpose
'Verdana',//FontFamilyOFF
'Verdana',//FontFamilyOn
'Verdana',//FontFamilyClick
,//for future purpose
,//for future purpose
,//for future purpose
8,//ItemFontSizeOff
8,//ItemFontSizeOn
8,//ItemFontSizeClick
26,//ItemPaddingLeft
2,//ItemPaddingTop
'#000000',//ItemFontColorOff
'#000000',//ItemFontColorOn
'#C0C0C0',//ItemFontColorClick
'normal',//FontBoldOff
'normal',//FontBoldOn
'bold',//FontBoldClick
'normal',//FontItalicsOff
'normal',//FontItalicsOn
'normal',//FontItalicsClick
'none',//TextDecorationUnderlineOff
'none',//TextDecorationUnderlineOn
'none',//TextDecorationUnderlineClick
,//LetterSpacing
0,//Item3DEffect
'transparent',//ItemBorderColorOff
'#6699CC',//ItemBorderColorOn
'#006600',//ItemBorderColorClick
1,//ItemBorderWidth
1,//ItemBorderLeft
1,//ItemBorderTop
1,//ItemBorderRight
1,//ItemBorderBottom
'transparent',//ItemInnerBorderColorOff
'#CDD8ED',//ItemInnerBorderColorOn
'#CDD8ED',//ItemInnerBorderColorClick
0,//ItemInnerBorderWidth
0,//ItemInnerBorderLeft
0,//ItemInnerBorderTop
0,//ItemInnerBorderRight
0,//ItemInnerBorderBottom
0,//ItemBorderImageActive
,//ItemBorderImageSrc
,//ItemInnerBgImageActive
,//ItemInnerBgImageSrc
0,//ItemBgImageActive
'fx_fade01.gif',//ItemBgImageSrc
'transparent',//ItemBgColorOff
'#CDD8ED',//ItemBgColorOn
'#FFFFFF',//ItemBgColorClick
1,//IndicatorArrowRightActivate
IndicatorArrowRightSubOpensRight,//IndicatorArrowRightSubOpensRight
IndicatorArrowRightSubOpensUp,//IndicatorArrowRightSubOpensUp
IndicatorArrowRightSubOpensLeft,//IndicatorArrowRightSubOpensLeft
IndicatorArrowRightSubOpensDown,//IndicatorArrowRightSubOpensDown
IndicatorArrowRightSubOpensDownRight,//IndicatorArrowRightSubOpensDownRight
,//
,//
0,//LeftArrowActivate
'',//LeftArrowOffSrc
'',//LeftArrowOnSrc
,//LeftArrowClickSrc
14,//LeftArrowWidth
15,//LeftArrowHeight
2,//LeftArrowLeft
2,//LeftArrowTop
0,//for future purpose
0,//for future purpose
1//Item3dEffectIsAuto

]


var example=[
[
190,//GroupWidth
19,//GroupHeight
22,//OffsetLeft
120,//OffsetTop
1,//GroupIsHorizontal
MSIEeffect,//MSIEEffectArray
,//ffp
,//ffp
groupstyle2,//GroupStyleArray
groupbehaviour,//GroupBehaviourArray
,//ffp
,//ffp
0,//GroupHorizontalOverlap
0//GroupVerticalOverlap

],

[
'FX DHTML Menus',//LinkTextOFF
,//LinkTextON
,//LinkTextONCLICK
,//ImageOFF
,//ImageON
,//ImageONCLICK
,//LinkURL
,//LinkTarget
itemstyle2,//DEFINES STYLE SETTINGS
'',//LinkTextStatusBar
'',//LinkToolTip
1,//ItemHasSubMenu
152,//ItemWidth
80,//ItemHeight
3,//ActivationIntensity
1,//ChangeItemStyleOnMouseOver
1,//ChangeItemStyleOnMouseOut
1,//ChangeItemStyleOnClick
'',//for future purpose
15,//ImageWidth
15,//ImageHeight
,//CursorOn
,//JavaScriptCommandOff
,//JavaScriptCommandOn
  //JavaScriptCommandClick
],
['Links',,,,,,,,itemstyle2,,,1,72,20,3,1,1,1,,,,'pointer'],
['Archive',,,,,,,,itemstyle2,,,1,82,20,3,1,1,1],
['Support',,,,,,,,itemstyle2,,,0,82,20,3,1,1,1]
]

var example_1=[
[175,28,,,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['Documentation',,,,,,'',,itemstyle,,'',0,92,17,3,1,1,1],
['Download',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1]
]


var example_2=[
[150,30,190,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['Hotscripts',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Scriptsearch',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Codepedia',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['W3C Markup Validation',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Webfx',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1]
]

var example_3=[
[150,20,266,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['JavaScripts',,,,,,,,itemstyle,,,1,92,17,3,1,1,1],
['Articles',,,,,,,,itemstyle,,,1,92,17,3,1,1,1],
['Navigation Arrows',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1]
]

var example_3_2=[
[190,20,266,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['Browser Marketshare',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Opera JavaScript',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1]
]


var example_3_1=[
[170,20,266,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['No right click',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Protect Images',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Moveable Menu V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Change BgColor Scripts',,,,,,,,itemstyle,,,1,92,17,3,1,1,1],
['Prevent Error Messages',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Right Click Menu V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Nav Menu Garf V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Browser Sniffer V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Preload Images V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Change Images V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,1],
['Forms',,,,,,'',,itemstyle,,,1,92,17,3,1,1,1],
['Games',,,,,,'',,itemstyle,,,1,92,17,3,1,1,1]
]

example_3_1_4=[
[180,30,253,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['BgColor static-Pal V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['BgColor static-Pal V 1.1',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['BgColor static-Pal V 1.2',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['BgColor dynamic-Pal V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['BgColor dynamic-Pal V 1.1',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['BgColor dynamic-Pal V 2.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['BgColor dynamic-Pal V 3.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['Dragbars BgColor V 1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0]
]

var example_3_1_11=[
[210,30,253,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['Undo and redo in forms v0.9',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['Undo and redo in forms v1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['Del and insert in forms v2.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0]
]

var example_3_1_12=[
[190,30,253,74,0,MSIEeffect,,,groupstyle,groupbehaviour,,,5,1],
['Make the salad v1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0],
['Minesweeper Tomse v1.0',,,,,,'',,itemstyle,,,0,92,17,3,1,1,0]
]