FXsinus.com HOME Home of FX DHTML Web Menus

FX DHTML menu example Relative Positioning and FirstMenuIsCommonHTML:





Home FX DHTML Menus Links Archive Support




Most important settings for this menu:
FirstMenuIsCommonHTML=1 (true) (Like in the main navigation of FXsinus)
PositionIsRelativeOrAbsolute=1 (for relative). All submenus are positioned relative to the mouse-coordinates of their appropriate links. Have a look at the sourcecode of this page: 
<table border="0" cellpadding="5" cellspacing="0" summary="JavaScripts and Web Menus">
  <tr>
   <td><a href="../../index.html">Home</a></td>
   <td><a href="#" onMouseOut="hide_fx('example_1',event)" onMouseOver="show_fx('example_1',event)">FX DHTML Menus</a></td>
   <td><a href="#" onMouseOut="hide_fx('example_2',event)" onMouseOver="show_fx('example_2',event)">Links</a></td>
   <td><a href="#" onMouseOut="hide_fx('example_3',event)" onMouseOver="show_fx('example_3',event)">Archive</a></td>
   <td><a href="../../html/support.html">Support</a></td>
  </tr>
</table>
To display a submenu use: show_fx('Name of submenu',event) and to hide it use hide_fx('Name of submenu',event). Make sure you replace "Name of submenu" with your menuname. If FirstMenuIsCommonHTML the second variable in fxnames is the number of submenus in the second level you have defined! (otherwise it would be the number of items in the first level)
MenuOpensOnClickOrOnMouseOver=0. All submenus open on "mouseover"-event.
Item3DEffect=1 for all submenu items
All "LinkURLs"were removed for this example.

Settings in the fx_array.js-file:

var fxnames=['example',3];
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
0,            //GroupInnerBgImageActive
'',            //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=[
0, //MenuOpensOnClickOrOnMouseOver click:1, mouse:0
0, //MenuClosesOnClick
1, //MenuClosesOnMouseOut
,  //for future purpose
1, //MenuClosesIfMouseOverOtherItem
1, //MenuClosesIfClickOnOtherItem
,  //for future purpose
150,  //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
1, //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
1,//Item3DEffect
'#FFFFFF',//ItemBorderColorOff
'#003366',//ItemBorderColorOn
'#006600',//ItemBorderColorClick
1,//ItemBorderWidth
1,//ItemBorderLeft
1,//ItemBorderTop
1,//ItemBorderRight
1,//ItemBorderBottom
'#FFFFFF',//ItemInnerBorderColorOff
'#6699CC',//ItemInnerBorderColorOn
'#CDD8ED',//ItemInnerBorderColorClick
0,//ItemInnerBorderWidth
0,//ItemInnerBorderLeft
0,//ItemInnerBorderTop
0,//ItemInnerBorderRight
0,//ItemInnerBorderBottom
0,//ItemBorderImageActive
,//ItemBorderImageSrc
,//ItemInnerBgImageActive
,//ItemInnerBgImageSrc
0,//ItemBgImageActive
'',//ItemBgImageSrc
'#FFFFFF',//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,,,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]
]