(Translated by https://www.hiragana.jp/)
DHTML Menu - Styles Properties Quick Reference Guide
Milonic Home Page Information and Benefits of Milonic Products Some Samples of DHTML and JavaScript Products Download DHTML Menu Purchase Milonic JavaScript DHTML Products Tech Support Contact Milonic
Member Login - Sitemap
Current Menu Version: 5.955 dated Sunday April 14 2024 Click to Download
Style Properties
alignThe align property sets the Text Alignment within all menu items.
Values: 'left', 'center' or 'right'
Example: align='center';
bgimageInserts a Background Image for each menu item. This property gives the menu a custom made graphic look.
Example: bgimage='background.gif';
bordercolorSets the Border Color of all menus. All valid HTML colornames or hex values can be used here. Note that the hash is needed for all hex value definitions.
Example: bordercolor='#000000';
borderstyleSets the Border Style for all menus. All valid CSS 1 and CSS 2 values can be declared for stylename.borderstyle. Values: 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset' & 'ouset'.
Example: borderstyle='dashed';
borderwidthSets the Border Width for all menus. Values must be declared as pixels. This is because the menu needs to know the width for positioning calculations.
Example: borderwidth=1
clickbgcolorChanges the background color once the item has been clicked. All valid HTML colornames or hex values can be used here. Note that the hash is needed for all hex value definitions.
Example: clickbgcolor='#FFFFFF';
clickbgimage
clickclass
clickcolorChanges the text color once the item has been clicked. All valid HTML colornames or hex values can be used here. Note that the hash is needed for all hex value definitions.
Example: clickcolor='#333333';
clickfunctionInserts a clickfunction which is used to fire a custom JavaScript function when an item link is clicked.
clickimageInserts an image once the item has been clicked.
Example: clickimage='select.gif';
clickinnerbgimage
clickrightimage
clickseparatorimage
clicksubimageChanges the subimage once the item has been clicked.
Example: clicksubimage='arrow_on.gif';
closeonclickAllows the menu to be closed by a click of the mouse on the main menu aswell it automatically closing as the mouse rolls off the selected menu.
Values: 'true', 'false', '0' or '1'
Example: closeonclick=1;
Example: closeonclick=true;
custom
decorationSets the Font Decoration for all menu text. All valid CSS1 & CSS2 text-decoration values can be declared.
Values: 'none', 'underline', 'overline' or 'line-through'.
Example: decoration='underline';
disabled
dividespan
dragable
fileimage
fontfamilySets the Font Family for all menu text. The Font must be present on the local computer otherwise the default browser font will be used. Font Family values can be separated by a comma with a preference to use the first font found.
Example: fontfamily = 'arial, verdana, tahoma';
fontsizeSets the Font Size for all menu text. Font Sizes can be declared as any valid CSS1 or CSS2 font sizes. Default values are in pixel but em, pt etc can be used providing the value is enclosed in quotes.
Example: fontsize=10; Example: fontsize='75%';
fontstyleSets the Font Style for all menu text.
Values: 'normal' or 'italic'.
Example: fontstyle ='italic';
fontweightSets the Font Weight for all menu text.
Values: normal or bold.
Other values can be used but have different outputs depending on browser. These are bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Example: fontweight='bold';
headerbgcolorSets the Header Background Color for all header menu items. This will set the backgound color declared for each menu item that has been declared a header. All valid HTML colornames or hex values can be used here.
Example: headerbgcolor='#666666';
headerborderAllows all of the headerborder property settings for the four borders to be fixed in one declaration for each menu item that has been declared a header. All valid HTML colornames or hex values can be used here.
Example: headerborder='1px solid #000000';
headercolorSets the Header Font Color for each menu item that has been declared a header.
Example: headercolor='#999999';
high3dcolorSets the High Border Color on 3D Objects for all menus. This is the color for menus and menuitem that have been specified to be 3 dimensional in style. Rather like the way in which Windows 98 menus appear. The High Color denotes the shadow color as a direct hit from the light source.
Example: high3dcolor='#FFFFFF';
hotkey
id
imageSets the Menu Item Image for your menu style. All menu items using this style will include the declared image. Image positioning and alignment can be performed by each menu item.
Example: image='item_background.gif';
imagealignSets the Image Alignment for the item image specified above.
Values: 'left', 'center' or 'right' Example: imagealign='left';
imageborderwidth
imageheightSets the Image Height for the item image specified above.
Example: imageheight=20;
imagepaddingSets the amount of Image Padding around the item image specified above.
Example: imagepadding=5;
imagepositionWill change the position of menu item images. Valid values are top, middle, bottom, left, center or right.
imageurl
imagewidthSets the Image Width for the item image specified above.
Example: imagewidtht=20;
innerbgimage
itemheightSets a specific Item Height for all menu items using the style.
Example: itemheight=28;
itemwidthSets a specific Item Width for all menu items using the style.
Example: itemwidth=130;
keepaliveThis property allows the menu to remain active when it would normally have disappeared. The active menu will close automatically once a sibling menu is opened.
Values: 'true', 'false', '0' or '1' Example: keepalive=1;
leftimage
low3dcolorSets the Low Border Color on 3D Objects for all menus. The Low Color denotes the shadow color as a shadow, not a direct hit from the light source.
Example: low3dcolor='#000000';
marginSets the margin, this is the space between onborder and the item border. This parameter has to be declared in each menu.
Example: margin=4;
menubgcolor
menubgimageThe menubgimage property sets the image to be used for the entire menu background.
Example: menubgimage='large_background.gif';
menustyle
nobreadcrumb
nowrap
offbgcolorSets the Mouse Off background Color for the global style. All menus that use this style will use the declared background color for each menu item in the mouse of state. This color should be used to declare the actual color of the menu.
Example: offbgcolor='#333333';
offborderSets the Mouse Off Border Style for the global menu style. The offborder property is used to declare the border width, style and color for each menu item in the mouse off state. Valid CSS parameters for setting borders must be used for this property.
Example: offborder='1px solid #aaaaaa';
This will enable a 1 pixel, solid gray border for each menu item in the mouse off state. This parameter can also be declared in each menuitem.
offclassSets the MouseOff Style Sheet Reference for any global menu style. offclass is used to declare a pre-defined Cascading Style Sheet property for each menu item in the mouse off state. Note that this feature will not work in Netscape 4.x due to the static nature of this browser. The properties declared for offclass, will be the default style for the menu.
offcolorSets the Mouse Off Font Color for any global menu style. This property declares the font color for each menu item in the Mouse Off state. Valid HTML colornames or Hex values can be used for this property. When using a Hex value, the value must be prefixed by a hash.
Example: offcolor='#000000';
offfunctionThe off function parameter is used to declare custom javascripts for menu items. This property allows a javascript function to be fired in the Mouse Off state.
onbgcolorSets the Mouse On Background Color for the global menu style. This property declares the background color for each menu item in the Mouse On state. Valid HTML colornames or Hex values can be used for this property. When using a Hex value, the value must be prefixed by a hash.
Example: onbgcolor='#66CC33';
onboldSets the Font Weight on Mouse Over for any global menu style. This property sets the menu text to bold in the Mouse On state.
Example onbold=1;
onborderSets the Mouse On Border Style for any global menu style. The onborder property is used to declare the border width, style and color for each menu item in the mouse on state. Valid CSS parameters for setting borders must be used for this property.
Example: onborder='1px dashed #ffffff';
This will enable a 1 pixel, dashed white border for each menu item in the mouse on state. This parameter can also be declared in each menuitem.
onclassSets the MouseOn Style Sheet Reference for any global menu style. onclass is used to declare a pre-defined Cascading Style Sheet property for each menu item in the mouse on state. Note that this feature will not work in Netscape 4.x due to the static nature of this browser. The properties declared for offclass, will be the default style for the menu.
oncolorSets the Mouse On Font Color for any global menu style. This property declares the font color for each menu item in the Mouse On state. Valid HTML colornames or Hex values can be used for this property. When using a Hex value, the value must be prefixed by a hash.
Example: oncolor='#f01f01';
ondecorationSets the Mouse On Text Decoration for all menu text. All valid CSS1 & CSS2 text-decoration values can be declared.
Values: none, underline, overline or line-through.
Example: ondecoration='underline';
onfunctionThe on function parameter is used to declare custom javascripts for menu items. This property allows a javascript function to be fired in the Mouse On state.
oninnerbgimage
onitalicSets the Mouse On Font Style on Mouse Over for any global menu style. This property sets the menu text to italic in the Mouse On state.
onleftimage
onpageimage
onrightimage
onseparatorimage
onsubimageChanges the Mouse On Sub Menu Image for any global menu style. This property, when declared will change the sub menu indicator image in the Mouse On state.
Example: onsubimage='subon_arrow.gif';
onsubimagecss
opendelay
openonclickAllows the menu to be opened by a click of the mouse on the main menu rather than it automatically opening as the mouse rolls over it.
Values: 'true', 'false', '0' or '1'
Example: openonclick=true;
Example: openonclick=0;
openonhover
outfilterThe outfilter property sets the style in which the menu closes. All filters and transitions above are also valid here.
Example: outfilter='randomdissolve(duration=0.4)'
overbgimageThe overbgimage parameter allows a second Background Image to appear when in the Mouseover state.
Example: overbgimage='background_on.gif';
overfilterSets the opening style of the menus. Filters and transitions make a significant difference in the appearance of how a menu materializes. Transition values: Barn, Blinds, Checkerboard, Fade, GradientWipe, Inset, Iris, Pixelate, RadialWipe, RandomBars, RandomDissolve, Slide, Spiral, Stretch, Strips, Wheel or ZigZag.
Filter values: Alpha, Blur, Motion Blur, Drop Shadow, Shadow, Glow, Wave, Emboss or Engrave.
Example: overfilter='Fade(duration=0.2);Shadow(color='#777777',Direction=135,Strength=3)';
overflow
overimageSets the Mouseover Item Image for your menu style. All menu items using this style will include the declared image.
Example: overimage='item_background_on.gif';
paddingSets the Menu Item Padding for any global menu style. Padding is the amount of white space between the text or other object and the menu item border. Padding values are in pixels.
Example: padding=3;
pagebgcolorThe pagebgcolor parameter sets the Current Page Menu Item background color for any global menu style. This property, when declared, will change the background color of a menu item if the URL matches the current URL. This is useful for indicating to the user where in the menu they need to go to navigate to this page.
Example: pagebgcolor='#ffff00';
pagebgimageThe pagebgimage parameter sets the Current Page Menu Item Image for any global menu style. This property, when declared, will change the background image of a menu item if the URL matches the current URL. This is useful for indicating to the user where in the menu they need to go to navigate to this page.
Example: pagebgimage='current_page.gif';
pageborderSets the Current Page Menu Item Border for any global menu style. The pageborder property is used to declare the border width, style and color for each menu item in the current page state. Valid CSS parameters for setting borders must be used for this property.
Example: pageborder='1px dashed #ffffff';
pageclassThe pageclass parameter is used to specify a classname for the Current Page Menu Item for CSS.
pagecolorSets the Current Page Menu Item Font Color for any global menu style. This property, when declared, will change the font color of a menu item if the URL matches the current URL. This is useful for indicating to the user where in the menu they need to go to navigate to this page.
Example: pagecolor='#000000';
pageimageSets the Current Page Menu Image for any global menu style. Will change the menu image to the declared image if the user has navigated to a page matching the URL in the menu definition.
Example: pageimage='matchimg.gif';
pageinnerbgimage
pageleftimage
pagematchThe pagematch property is used to highlight the menu item if the URL matches the current URL.
pageonclass
pageoncolor
pagerightimage
pageseparatorimage
pagesubimage
pointerThe pointer parameter changes the mouse pointer to the declared curser image as it navigates the menu.
Values: auto, crosshair, default, pointer, move, text, wait & help.
Example: pointer='move';
Url can also be used to define a custom curser from a specific location.
Example: pointer=url('first.cur'), url('second.cur'), pointer;
rawcssThe rawcss parameter allows any kind of CSS to be added to the menu.
regexmatch
rel
rightimage
separatoralignThe separatoralign parameter sets the Menuitem Separator Bar alignment for any global menu style. This property will alter the menus alignment of separator lines. This feature will only have an effect if the separator width or height has been declared and is smaller than the height or width of the menu it resides.
Values: 'left', 'center' or 'right'
Example: separatoralign='center';
separatorcolorSets the Menuitem Separator Bar Color for any global menu style. This property sets the color of the default menu separator line in both horizontal and vertical menus. This property can also be changed inside each menu item.
Example: separatorcolor='#ffffff'
separatorheightThe separatorheight property sets the Menuitem Separator Bar height for any global menu style. This property will change the height of the separator line in horizontal menus only. For this property to have any effect the declared height must be less than the height of the horizontal menu.
Example: separatorheight=10;
separatorimageAllows a custom separatorimage to be used instead of a standard separator line. This feature will only have an effect if the separator width or height has been declared.
Example: separatorimage='dots.gif';
separatorpaddingSets the Menuitem Separator Bar Padding for any global menu style. Separator padding will add white space either side of the menu item separator in both horizontal and vertical menus.
Example: separatorpadding=5;
separatorsizeSets the Menuitem Separator Bar Size for any global menu style. Separator size is the thickness of the separator line in pixels, used for both vertical and horizontal menus.
Example: separatorsize=2;
separatorwidthSets the Menuitem Separator Bar Width for any global menu style. This property allows the adjustment of the width of separator lines in vertical menus. The declared width will need to be less than the width of the menu. If not the width of the separator line will render the menu width to suit.
Example: separatorwidth=40;
shadow
showmenuThe showmenu parameter allows you to define the menu you wish the menu item to open.
aI('text=Links;showmenu=Links;');
statusThe status property is used to add text to the status bar on mouseover.
Example: aI('text=Home;url=http://www.milonic.com/;status=Back To Home Page;');
subimageSets the Sub Menu Indicator Image for any global menu style. This property declares the sub menu indicator image for each menu item that contains a showmenu command.
Example: subimage='sub_arrow.gif';
subimagecss
subimagepaddingSets the Sub Menu Indicator Padding for any global menu style. This property will add white space to sub menu indicator images. The value for this property is in pixels.
Example: subimagepadding=3;
subimagepositionSets the Sub Menu Image Position for any global menu style. This property will move the submenu indicator image based on CSS positioning values.
Values: top, left, right, center, middle or bottom. Or a sensible combination of 2 values separated by a semi colon. Note that tall text values must be declared inside quotes. Example: subimageposition='left';
swap3dThe 3d effect declared in high3dcolor and low3dcolor creates a raised effect for the menu and a sunken effect for the menu separators. The swap3d parameter allows the raised and sunken effects to be swapped creating a raised separator bar and a deep-set menu.
Example:swap3d='true';
targetThe target property allows you to declare a menu item link destination Values: new, blank Example: target='blank';
targetfeatures
textThe text property inserts the menu item text. This parameter has to be declared in each menu item that requires visible text.
Example: aI('text=Home;');
tipdelay
tipfollow
tipmenu
titleThe title parameter inserts alt text to menu items.
Example: title='Click here';
tooltip
transition
typeThe type property sets the type of menu to be displayed. Changing the type will allow the menu to transform dramatically.
Values: form, dragable, header or tree.
Example: type='dragable';
urlSets the address a menu item links to.
Example:aI('text=Contact Us;url=http://www.milonic.com/contactus.php;');
valignThe valign parameter adjusts the vertical alignment of the text within the all menus.
Values: top, middle or bottom.
Example: valign='top';
visitedcolorSets the text color for items previously visited. The visitedcolor property uses all valid HTML colornames or hex values. Note that the hash is needed for all hex value definitions.
Example: visitedcolor='#B141AA';


Purchase The Menu

Download DHTML Menu

See our list of Menu users

Milonic provide full featured pull down web menus for some of the worlds largest companies

Learn about how Milonic's DHTML menus can benefit your site

What does it cost? DHTML Menu prices

Who is using us?
Sample Client list

Bespoke menu design and build service from the Milonic team

Our bolt-on modules provide free optional extras for specialist projects

Free icons and images for all licensed users with our Menu Imagepack

What is Milonic up to at the moment? Check our blog