FXsinus.com HOME Home of FX DHTML Web Menus

FX DHTML menu example Windows 98 style:









Most important settings for this menu:
var fxnames=['Name for your Menus',Number of items in the first level]
FirstMenuIsCommonHTML=0 (Like in the main navigation of FXsinus.com)
MenuOpensOnClickOrOnMouseOver=0
MainMenuHorizontalPosition='r'
Uses 2 different itemstyles, one for the first level, the second for all submenus.
In the first level all items have a 3d-border and IndicatorArrowRightActivate is off. Item3DEffect=1, IndicatorArrowRightActivate=0.
IntelligentSubMenuPositioningCorrection=1
ChooseStandardCursor='default'
All "LinkURLs" were removed for this example. Click on "FX DHTML Menus" in the menu, to see the "onclick"-style. Only this item was set to allow stylechange "onclick"-event by setting ChangeStyleOnClick to true.

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=315, Strength=1)' ]

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



var groupbehaviour=[
0, //MenuOpensOnClickOrOnMouseOver click:1, mouse:0
0, //MenuClosesOnClick
1, //MenuClosesOnMouseOut
,  //for future purpose
1, //MenuClosesIfMouseOverOtherItem
1, //MenuClosesIfClickOnOtherItem
,  //for future purpose
100,  //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
'r',  //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
'default',//ChooseStandardCursor
,   //DisallowTextSelect for future purpose
'', //LinkTextStatusStandard
1,  //IntelligentSubMenuPositioningCorrection
,   //PreferredScreenResolutionHorizontal
,   //PreferredScreenResolutionVertical for future purpose
7,  //IntelligentSubMenuPositioningLeftcorr
0   //IntelligentSubMenuPositioningTopcorr for future purpose

]


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

var itemstyle=[
,//for future purpose
,//for future purpose
'Arial,Verdana',//FontFamilyOFF
'Arial,Verdana',//FontFamilyOn
'Arial,Verdana',//FontFamilyClick
,//for future purpose
,//for future purpose
,//for future purpose
8,//FontSizeOff
8,//FontSizeOn
8,//FontSizeClick
12,//PaddingLeft
2,//PaddingTop
'#000000',//FontColorOff
'#FFFFFF',//FontColorOn
'#000000',//FontColorClick
'normal',//FontBoldOff
'normal',//FontBoldOn
'normal',//FontBoldClick
'normal',//FontItalicsOff
'normal',//FontItalicsOn
'normal',//FontItalicsClick
'none',//TextDecorationUnderlineOff
'none',//TextDecorationUnderlineOn
'none',//TextDecorationUnderlineClick
,//LetterSpacing
0,//Item3DEffect
'#C0C0C0',//BorderColorOff
'#C0C0C0',//BorderColorOn
'#C0C0C0',//BorderColorClick
0,//BorderWidth
0,//BorderLeft
0,//BorderTop
0,//BorderRight
0,//BorderBottom
'#C0C0C0',//InnerBorderColorOff
'#C0C0C0',//InnerBorderColorOn
'#C0C0C0',//InnerBorderColorClick
9,//InnerBorderWidth
1,//InnerBorderLeft
1,//InnerBorderTop
1,//InnerBorderRight
1,//InnerBorderBottom
1,//BorderImageActive
,//BorderImageSrc
,//InnerBorderImageActive
,//InnerBorderImageSrc
0,//BorderImageActive
'fx_fade01.gif',//BgImageSrc
'#C0C0C0',//BgColorOff
'#000080',//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 itemstyle2=[
,//for future purpose
,//for future purpose
'Arial,Verdana',//FontFamilyOFF
'Arial,Verdana',//FontFamilyOn
'Verdana',//FontFamilyClick
,//for future purpose
,//for future purpose
,//for future purpose
8,//FontSizeOff
8,//FontSizeOn
8,//FontSizeClick
12,//PaddingLeft
2,//PaddingTop
'#000000',//FontColorOff
'#000000',//FontColorOn
'#000000',//FontColorClick
'normal',//FontBoldOff
'normal',//FontBoldOn
'normal',//FontBoldClick
'normal',//FontItalicsOff
'normal',//FontItalicsOn
'normal',//FontItalicsClick
'none',//TextDecorationUnderlineOff
'none',//TextDecorationUnderlineOn
'none',//TextDecorationUnderlineClick
,//LetterSpacing
1,//Item3DEffect
'#C0C0C0',//BorderColorOff
'#808080',//BorderColorOn
'331',//BorderColorClick
1,//BorderWidth
0,//BorderLeft
0,//BorderTop
0,//BorderRight
0,//BorderBottom
'#C0C0C0',//InnerBorderColorOff
'#FFFFFF',//InnerBorderColorOn
'236',//InnerBorderColorClick
1,//InnerBorderWidth
1,//InnerBorderLeft
1,//InnerBorderTop
1,//InnerBorderRight
1,//InnerBorderBottom
1,//BorderImageActive
,//BorderImageSrc
,//InnerBorderImageActive
,//InnerBorderImageSrc
0,//BorderImageActive
'fx_fade01.gif',//BgImageSrc
'#C0C0C0',//BgColorOff
'#C0C0C0',//BgColorOn
'#CDD8ED',//BgColorClick
0,//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
17,   //GroupHeight
22,   //OffsetLeft
120,  //OffsetTop
1,    //GroupIsHorizontal
MSIEeffect,  //MSIEEffectArray
,  //ffp
,  //ffp
groupstyle,     //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
95,                            //ItemWidth
80,                            //ItemHeight
3,                             //ActivationIntensity
1,                             //ChangeItemStyleOnMouseOver
1,                             //ChangeItemStyleOnMouseOut
0,                             //ChangeItemStyleOnClick
'',                            //for future purpose
15,                            //ImageWidth
15,                            //ImageHeight
,                              //CursorOn
,                              //JavaScriptCommandOff
,                              //JavaScriptCommandOn
                               //JavaScriptCommandClick
],
['Links',,,,,,,,itemstyle2,,,1,45,20,3,1,1,0,,,,'default'],
['Archive',,,,,,,,itemstyle2,,,1,52,20,3,1,1,0],
['Support',,,,,,,,itemstyle2,,,0,52,20,3,1,1,0]
]

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


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

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

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


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

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]
]