DHTML Menus: Documentation

	The Menu, reloaded

FX Sinus offers one of the most versatile DHTML navigation systems

Either your browser doesn't support JavaScript properly, or you have turned JavaScript off. Though most of the content at fxsinus.com relies on JavaScript and is therefore not visible to you, feel free to navigate with the links below or with the help of the sitemap.

FX DHTML Menu

Menu Version Information
Reference Guide: Global Variables
Reference Guide: Style Properties
Reference Guide: Menu Properties
Reference Guide: Item Properties
FAQ
Browser Compatibility
Compatibility with other Scripts
Menu Samples Overview
Professional Webdesigners
License & Purchase
Download FX Menu

Support

E-Mail
Forum

Archive

Complete Archive Sitemap
MX Menu Wizard
MineSweeper JavaScript

FX Documentation

	Page-Integration
	Menu hierarchy
	Group behaviour
	Group style settings
	Group main settings
	Item behaviour
	Item style settings
	Indicator settings
	MSIE effects
	Positioning the menu
	Adding items and submenus

FX Web Menus Examples

	FX DHTML Menu Example
	Horizontal Web Menu
	Windows 98 Example
	Windows XP Example
	Relative Positioning
	Hiding Form Elements
	Hiding Flash animations

Itemstylesettings v3.0.x

Item screenshot: Borders and Padding

Example item style array:

var itemstyle=[ , , 'Verdana,Arial', 'Verdana,Arial', 'Verdana,Arial', , , , 9, 9, 9, 3, 2, '#000000', '#FFFFFF', '#FFFFFF', 'normal', 'normal', 'normal', 'normal', 'normal', 'normal', 'none', 'none', 'none', , 0, '#000000', '#000000', '#000000', 0, 0, 0, 0, 0, '#000000', '#000000', '#000000', 0, 0, 0, 0, 0, 0, , , , 0, '', '#FFFFFF', '#6699CC', '#009933', 1, IndicatorArrowRightSubOpensRight, IndicatorArrowRightSubOpensUp, IndicatorArrowRightSubOpensLeft, IndicatorArrowRightSubOpensDown, IndicatorArrowRightSubOpensDownRight, , , 0, '', '', '', 15, 10, 15, 2, 0, 0, 0 ]

Example item style array with property names:

Editing the item style for a FX DHTML menu is similar to defining css for HTML-pages. Think of it as plain text. Itemstyle defines visual effects for each menu item. For FX Menu following things may be defined:

var itemstyle=[
,               //for future purpose
,               //for future purpose
'Verdana,Arial',//FontFamilyOFF
'Verdana,Arial',//FontFamilyOn
'Verdana,Arial',//FontFamilyClick
,               //for future purpose
,               //for future purpose
,               //for future purpose
9,              //FontSizeOff
9,              //FontSizeOn
9,              //FontSizeClick
3,              //PaddingLeft
2,              //PaddingTop
'#000000',      //FontColorOff
'#FFFFFF',      //FontColorOn
'#FFFFFF',      //FontColorClick
'normal',       //FontBoldOff
'normal',       //FontBoldOn
'normal',       //FontBoldClick
'normal',       //FontItalicsOff
'normal',       //FontItalicsOn
'normal',       //FontItalicsClick
'none',         //TextDecorationUnderlineOff
'none',         //TextDecorationUnderlineOn
'none',         //TextDecorationUnderlineClick
,               //LetterSpacing
0,              //Item3DEffect
'#000000',      //BorderColorOff
'#000000',      //BorderColorOn
'#000000',      //BorderColorClick
0,              //BorderWidth
0,              //BorderLeft
0,              //BorderTop
0,              //BorderRight
0,              //BorderBottom
'#000000',      //InnerBorderColorOff
'#000000',      //InnerBorderColorOn
'#000000',      //InnerBorderColorClick
0,              //InnerBorderWidth
0,              //InnerBorderLeft
0,              //InnerBorderTop
0,              //InnerBorderRight
0,              //InnerBorderBottom
0,              //BorderImageActive
,               //BorderImageSrc
,               //InnerBorderImageActive
,               //InnerBorderImageSrc
0,              //BgImageActive
'',             //BgImageSrc
'#FFFFFF',      //BgColorOff
'#6699CC',      //BgColorOn
'#009933',      //BgColorClick
1,              //IndicatorArrowRightActivate
IndicatorArrowRightSubOpensRight,    //IndicatorArrowRightSubOpensRight
IndicatorArrowRightSubOpensUp,       //for future purpose
IndicatorArrowRightSubOpensLeft,     //for future purpose
IndicatorArrowRightSubOpensDown,     //IndicatorArrowRightSubOpensDown
IndicatorArrowRightSubOpensDownRight,//for future purpose
,               //for future purpose
,               //for future purpose
0,              //LeftArrowActivate
'',             //LeftArrowSrcOff
'',             //LeftArrowSrcOn
'',             //LeftArrowSrcClick
15,             //LeftArrowWidth
10,             //LeftArrowHeight
15,             //LeftArrowLeft
2,              //LeftArrowTop
0,              //for future purpose
0,              //for future purpose
0               //Item3DEffectIsAuto
]

Properties

Pos	Property	Description	Example	Values
0	for future purpose
5	for future purpose
2	FontFamilyOFF	Do not use to exotic font-families or set a common font-family as second.	'Arial, Verdana, Helvetica' 'MT Extra, Arial'	Fonts.
3	FontFamilyOn	Do not use to exotic font-families or set a common font-family as second.	'Arial, Verdana, Helvetica' 'MT Extra, Arial'	Fonts.
4	FontFamilyClick	Do not use to exotic font-families or set a common font-family as second.	'Arial, Verdana, Helvetica' 'MT Extra, Arial'	Fonts.
5	for future purpose
6	for future purpose
7	for future purpose
8	FontSizeOff	Unit is 'point'.	9	positive integer number
9	FontSizeOn	Unit is 'point'.	9	positive integer number
10	FontSizeClick	Unit is 'point'.	9	positive integer number
11	PaddingLeft	Unit is 'pixel'.	5	positive integer number
12	PaddingTop	Unit is 'pixel'.	2	positive integer number
13	FontColorOff		'#003366' blue red, ....	color values
14	FontColorOn		'#003366' blue red, ....	color values
15	FontColorClick		'#003366' blue red, ....	color values
16	FontBoldOff	Set the font-weight. Numbers aren't accepted. Use 'normal' or 'bold'.	'normal' 'bold'	'normal' or 'bold'
17	FontBoldOn	Set the font-weight. Numbers aren't accepted. Use 'normal' or 'bold'.	'normal' 'bold'	'normal' or 'bold'
18	FontBoldClick	Set the font-weight. Numbers aren't accepted. Use 'normal' or 'bold'.	'normal' 'bold'	'normal' or 'bold'
19	FontItalicsOff		'italic' 'normal'	'italic' or 'normal'
20	FontItalicsOn		'italic' 'normal'	'italic' or 'normal'
21	FontItalicsClick		'italic' 'normal'	'italic' or 'normal'
22	TextDecorationUnderlineOff		'underline' 'none'	'underline' or 'none'
23	TextDecorationUnderlineOn		'underline' 'none'	'underline' or 'none'
24	TextDecorationUnderlineClick		'underline' 'none'	'underline' or 'none'
25	LetterSpacing	Unit is pixel. Only supported by DOM-compliant browsers	2	positive integer number
26	Item3DEffect	Special feature: Creates 3-D borders for the item. ItemBorderColor and ItemInnerBorderColor should have different values. If you want the borderwidths to have equal values set Item3DEffectIsAuto to true(1) and set the width in ItemBorderWidth.		boolean: true(1) or false(0)
27	BorderColorOff		'#003366' blue red, ....	color values
28	BorderColorOn		'#003366' blue red, ....	color values
29	BorderColorClick		'#003366' blue red, ....	color values
30	BorderWidth	Unit is pixel.	2	positive integer number
31	BorderLeft	Unit is pixel.	2	positive integer number
32	BorderTop	Unit is pixel.	2	positive integer number
33	BorderRight	Unit is pixel.	2	positive integer number
34	BorderBottom	Unit is pixel.	2	positive integer number
35	InnerBorderColorOff		'#003366' blue red, ....	color values
36	InnerBorderColorOn		'#003366' blue red, ....	color values
37	InnerBorderColorClick		'#003366' blue red, ....	color values
38	InnerBorderWidth	Unit is pixel.	2	positive integer number
39	InnerBorderLeft	Unit is pixel.	2	positive integer number
40	InnerBorderTop	Unit is pixel.	2	positive integer number
41	InnerBorderRight	Unit is pixel.	2	positive integer number
42	InnerBorderBottom	Unit is pixel.	2	positive integer number
43	BorderImageActive	Activates a background-image, that is defined in ItemBorderImageSrc		boolean: true(1) or false(0)
44	BorderImageSrc	Enter background-image path for ItemBorder here. Important: Image-path has to be relative to the HTML-page, where the menu will be displayed and not relative to the js-file! Instead of "\" use "/".	'images/flowerbackground.gif'
45	InnerBorderImageActive	Activates a background-image, that is defined in ItemInnerBorderImageSrc		boolean: true(1) or false(0)
46	InnerBorderImageSrc	Enter background-image path for ItemInnerBorder here. Important: Image-path has to be relative to the HTML-page, where the menu will be displayed and not relative to the js-file! Instead of "\" use "/".	'images/flowerbackground.gif'
47	BgImageActive	Activates a background-image for the item		boolean: true(1) or false(0)
48	BgImageSrc	Enter background-image path for the item here. Important: Image-path has to be relative to the HTML-page, where the menu will be displayed and not relative to the js-file! Instead of "\" use "/".	'images/flowerbackground.gif'
49	BgColorOff		'#003366' blue red, ....	color values
50	BgColorOn		'#003366' blue red, ....	color values
51	BgColorClick		'#003366' blue red, ....	color values
52	IndicatorArrowRightActivate	Set to true(1) to display an arrow or any image, in case item contains a submenu. For horizontal groups the arrow-settings are handled in the IndicatorArrowRightSubOpensDown array, for vertical groups in the IndicatorArrowRightSubOpensRight.		boolean: true(1) or false(0)
53	IndicatorArrowRightSubOpensRight	Interface to the arrow-settings. The arrow-settings have to be defined before the item-style!
54	for future purpose
55	for future purpose
56	IndicatorArrowRightSubOpensDown	Interface to the arrow-settings. The arrow-settings have to be defined before the item-style!
57	for future purpose
58	for future purpose
59	for future purpose
60	LeftArrowActivate	Activates LeftArrowSrc.		boolean: true(1) or false(0)
61	LeftArrowSrcOff	Displays an arrow or any image before the text or the "mainimage". Image-path has to be relative to the HTML-page, where the menu will be displayed and not relative to the js-file! Instead of "\" use "/".	'images/arrow.gif'
62	LeftArrowSrcOn	Image-path has to be relative to the HTML-page, where the menu will be displayed and not relative to the js-file! Instead of "\" use "/".	'images/arrow.gif'
63	LeftArrowSrcClick	Image-path has to be relative to the HTML-page, where the menu will be displayed and not relative to the js-file! Instead of "\" use "/".	'images/arrow.gif'
64	LeftArrowWidth	Unit is pixel.	15	positive integer number
65	LeftArrowHeight	Unit is pixel.	15	positive integer number
66	LeftArrowLeft	Unit is pixel.	5	positive integer number
67	LeftArrowTop	Unit is pixel.	2	positive integer number
68	for future purpose
69	for future purpose
70	Item3DEffectIsAuto	Sets ItemBorderwidths and ItemBorderWidths to the value defined in ItemBorderWidth.		boolean: true(1) or false(0)

Home | Forum | Link to us

FXsinus.com - Austria.

Vor der Bruck 15,

A-2770 Goodstone