Developer's manual

um.navbar

Styles which apply to the main navbar.

• Skip code example

//styles which apply to the navbar
um.navbar = [
	'-6',    // nav to menu x-offset (+-)["n" pixels]
	'-11',   // nav to menu y-offset (+-)["n" pixels]
	'7.5em', // width ["em"|"ex"|"px"]
	];

//styles which apply to the navbar
$um['navbar'] = array(
	'-6',    // nav to menu x-offset (+-)["n" pixels]
	'-11',   // nav to menu y-offset (+-)["n" pixels]
	'7.5em', // width ["em"|"ex"|"px"]
	);

nav to menu x-offset (+-)["n" pixels]

Specify the horizontal offset between the navbar and first-level of menus, as a positive or negative integer in pixels. You musn't include the "px" unit, just the number. With a value of "0" adjacent menu and navbar-link borders will touch, but not overlap. Whether you use left or right alignment, a positive value means "further away", but note that since positive values create a gap between the navbar and menus, they're only possible because of the menu timers, so you should avoid very large gaps, or increase the close timer to compensate.

nav to menu y-offset (+-)["n" pixels]

Specify the vertical offset between the navbar and first-level of menus, as a positive (down) or negative (up) integer in pixels. You musn't include the "px" unit, just the number.

width ["em"|"ex"|"px"]

Specify the width of a vertical navbar, using "em", "ex" or pixels; percentage is not supported. You cannot exclude the unit unless the value is "0". The output size is the same cross-browser, regardless of rendering mode.

Although you can use "ex" units, I wouldn't recommend them, because browsers have very different ideas about how big they are. I think the best unit to use is "em".

This only applies to a vertical navbar - with a horizontal navbar the item widths are always "auto", unless you style them externally.

um.items

Styles which apply to each navbar item.

• Skip code example

//styles which apply to each navbar item
um.items = [
	'1',             // margin between items ["n" pixels]
	'1',             // border size ["n" pixels]
	'collapse',      // border collapse ["collapse"|"separate"]
	'#ead4a4 #edbb85 #edbb85 #ead4a4', // border colors ["color"|"#hex"|"rgb()"]
	'solid',         // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]
	'#ead4a4 #ffe #fae4b4 #fae4b4', // hover/focus border colors ["color"|"#hex"|"rgb()"]
	'solid',         // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]
	'#ead4a4 #edbb85 #edbb85 #ead4a4', // visited border colors ["color"|"#hex"|"rgb()"]
	'solid dashed solid solid', // visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]
	'9',             // left/right padding ["n" pixels]
	'5',             // top/bottom padding ["n" pixels]
	'orange-yellow-gradient.jpg', // background ["color"|"#hex"|"rgb()"|"image.gif"]
	'orange-cream-gradient.jpg', // hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
	'orange-yellow-gradient.jpg', // visited background ["color"|"#hex"|"rgb()"|"image.gif"]
	'75%',           // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
	'tahoma,sans-serif', // font family ["font1,font2,font3"]
	'bold',          // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
	'none',          // text decoration ["none"|"underline"|"overline"|"line-through"]
	'left',          // text-align ["left"|"right"|"center"]
	'#008000',       // color ["color"|"#hex"|"rgb()"]
	'#b05010',       // hover/focus color ["color"|"#hex"|"rgb()"]
	'#008000',       // visited color ["color"|"#hex"|"rgb()"]
	'normal',        // font-style ["normal"|"italic"|"oblique"]
	'normal',        // hover/focus font-style ["normal"|"italic"|"oblique"]
	'normal',        // visited font-style ["normal"|"italic"|"oblique"]
	'background-color:#ffc;letter-spacing:1px !important;', // additional link CSS
	'background-color:#ffe;padding-left:10px;', // additional hover/focus CSS
	'',              // additional visited CSS
	'right-green.gif', // menu indicator character/image ["text"|"image.gif"|"none"]
	'right-red.gif', // menu indicator rollover image ["image.gif"|"none"]
	'7',             // clipping width of indicator image ["n" pixels]
	'..',            // alt text of indicator image ["text"]
	];

//styles which apply to each navbar item
$um['items'] = array(
	'1',             // margin between items ["n" pixels]
	'1',             // border size ["n" pixels]
	'collapse',      // border collapse ["collapse"|"separate"]
	'#ead4a4 #edbb85 #edbb85 #ead4a4', // border colors ["color"|"#hex"|"rgb()"]
	'solid',         // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]
	'#ead4a4 #ffe #fae4b4 #fae4b4', // hover/focus border colors ["color"|"#hex"|"rgb()"]
	'solid',         // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]
	'#ead4a4 #edbb85 #edbb85 #ead4a4', // visited border colors ["color"|"#hex"|"rgb()"]
	'solid dashed solid solid', // visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]
	'9',             // left/right padding ["n" pixels]
	'5',             // top/bottom padding ["n" pixels]
	'orange-yellow-gradient.jpg', // background ["color"|"#hex"|"rgb()"|"image.gif"]
	'orange-cream-gradient.jpg', // hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
	'orange-yellow-gradient.jpg', // visited background ["color"|"#hex"|"rgb()"|"image.gif"]
	'75%',           // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
	'tahoma,sans-serif', // font family ["font1,font2,font3"]
	'bold',          // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
	'none',          // text decoration ["none"|"underline"|"overline"|"line-through"]
	'left',          // text-align ["left"|"right"|"center"]
	'#008000',       // color ["color"|"#hex"|"rgb()"]
	'#b05010',       // hover/focus color ["color"|"#hex"|"rgb()"]
	'#008000',       // visited color ["color"|"#hex"|"rgb()"]
	'normal',        // font-style ["normal"|"italic"|"oblique"]
	'normal',        // hover/focus font-style ["normal"|"italic"|"oblique"]
	'normal',        // visited font-style ["normal"|"italic"|"oblique"]
	'background-color:#ffc;letter-spacing:1px !important;',	// additional link CSS
	'background-color:#ffe;padding-left:10px;', // additional hover/focus CSS
	'',              // additional visited CSS
	'right-green.gif', // menu indicator character/image ["text"|"image.gif"|"none"] 
	'right-red.gif', // menu indicator rollover image ["image.gif"|"none"]
	'7',             // clipping width of indicator image ["n" pixels]
	'..',            // alt text of indicator image ["text"]
	);

margin between items ["n" pixels]

Specify a single integer in pixels for the margin between each navbar link. It will be margin-bottom for a vertical navbar, or margin-right for a horizontal navbar. You musn't include the "px" unit, just the number.

border size ["n" pixels]

Specify a single integer in pixels for the border size around each navbar link. You musn't include the "px" unit, just the number.

border collapse ["collapse"|"separate"]

This mimics the CSS border-collapse property of tables - if the margin between items is "0" you can specify whether borders should "collapse", so that there's only one thickness between adjacent links, or remain "separate".

Border collapse works by applying a negative margin to each link, causing it to overlap the previous one. The overall position of the navbar cannot allow for this automatically - your navbar will be negatively offset by the same amount as the item border size, so you should adjust the navbar x position to compensate.

If there are item border rollovers, the script uses dynamic z-index to maintain the integrity of individual borders - each link is moved to the top of the stack when highlighted. Unfortunately this doesn't work reliably in any version of Internet Explorer, Konqueror, Opera 5 or 6; it also can't work when scripting is not available. Therefore if you're using border collapse you should probably avoid border rollovers, unless you're working for a known user-base, or you don't mind the discrepancy.

border colors ["color"|"#hex"|"rgb()"]

Specify one, two or four border colors for the default state of navbar links, as colornames, hex or rgb color values.

border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]

Specify one, two or four border styles for the default state of navbar links, using any valid CSS values. If you use the border-style "none" then please be aware that the border size is part of the menu positioning calculations, and if the border-style is "none" there'll be a value but no rendered border, so you'll get a position discrepancy equal to the border size.

hover/focus border colors ["color"|"#hex"|"rgb()"]

Specify one, two or four border colors for the hover and focus states of navbar links, as colornames, hex or rgb color values.

hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]

Specify one, two or four border styles for the hover and focus states of navbar links, using any valid CSS values.

visited border colors ["color"|"#hex"|"rgb()"]

Specify one, two or four border colors for the visited state of navbar links, as colornames, hex or rgb color values.

visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"]

Specify one, two or four border styles for the visited state of navbar links, using any valid CSS values.

left/right padding ["n" pixels]

Specify the left and right padding of navbar links, using a single pixel integer. You musn't include the "px" unit, just the number.

top/bottom padding ["n" pixels]

Specify the top and bottom padding of navbar links, using a single pixel integer. You musn't include the "px" unit, just the number.

background ["color"|"#hex"|"rgb()"|"image.gif"]

Specify the background for the default state of navbar links, as a colorname, a hex or rgb color value, or an image. Images can be GIF, JPEG (JPG), PNG, MNG or BMP. If you want transparency you can use the colorname "transparent".

Please note: image backgrounds will not be applied in Opera 5 or 6, because they don't support background-image in element pseudo-classes. Therefore you must ensure you define redundent background colors, using the additional CSS values. But you should do that anyway, for the benefit of browsers that don't display images.

If you want to use image backgrounds and it has to look the same in Opera 5 or 6, you can use the image-replacement technique described in the Making an image-based navbar documentation.

hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]

Specify the background for the hover and focus states of navbar links, as a colorname, a hex or rgb color value, or an image. This doesn't have to be the same type as the default state - you can mix colors and images together.

visited background ["color"|"#hex"|"rgb()"|"image.gif"]

Specify the background for the visited state of navbar links, as a colorname, a hex or rgb color value, or an image. You can mix background types here as well.

font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]

Specify the navbar font size using any valid CSS value. "absolute-size" means a value such as "small" or "large"; "relative-size" means "smaller" or "larger".

I strongly recommend you DO NOT use "px" or "pt", because they create unscaleable text in Win/IE. And although you can use "ex" units, I wouldn't recommend them either, because browsers have very different ideas about how big they are.

I think the best units to use are "em" or "%".

font family ["font1,font2,font3"]

Specify the font family used for navbar links, as one or more specific or generic family names. Always end with a generic family name - "serif", "sans-serif", "cursive", "fantasy" or "monospace".

font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]

Specify the font weight of navbar links.

text decoration ["none"|"underline"|"overline"|"line-through"]

Specify the text-decoration of navbar links using any valid CSS value.

There is a text-decoration value "blink", but you shouldn't use it - the Web Content Accessibility Guidelines specifically say to avoid causing content to blink, because it may trigger a seizure in a person who has photosensitive epilepsy.

text-align ["left"|"right"|"center"]

Specify the text-alignment of navbar links.

When using a horizontal navbar the text-alignment is fixed as "left", which is necessary to avoid a serious display bug in Opera 5 and 6. In most circumstances there'll be no visible difference anyway - the cells in a horizontal navbar normally have "auto" width, so there's no free space in which alignment would be noticeable.

color ["color"|"#hex"|"rgb()"]

Specify the color of the default state of navbar links, as a colorname, a hex or rgb color value.

hover/focus color ["color"|"#hex"|"rgb()"]

Specify the color of the hover and focus states of navbar links, as a colorname, a hex or rgb color value.

visited color ["color"|"#hex"|"rgb()"]

Specify the color of the visited state of navbar links, as a colorname, a hex or rgb color value.

font-style ["normal"|"italic"|"oblique"]

Specify the font-style of the default state of navbar links. Very few fonts have different italic and oblique styles.

hover font-style ["normal"|"italic"|"oblique"]

Specify the font-style of the hover and focus states of navbar links.

visited font-style ["normal"|"italic"|"oblique"]

Specify the font-style of the visited state of navbar links.

additional link CSS

You can use this space to pass any additional CSS to the default state of navbar links - for example, if you use image backgrounds you should define a redundent background-color for browsers that don't display images. In theory there are no limitations, but in practise you should be very careful, particularly with properties which are already defined elsewhere, such as position, margins or padding.

Ultimately nothing you do here is guaranteed to work - it's up to you to do thorough testing; some rules may need !important to be stable or have sufficient specificity.

Whatever you define here will cascade down to the menu links, and automatically applies to the visited state as well.

additional hover/focus CSS

Use this space to pass additional CSS to the hover and focus states of navbar links - for example, if you use image backgrounds you should define a redundent background-color for browsers that don't display images.

additional visited CSS

Use this space to pass additional CSS to the visited state of navbar links - for example, if you use image backgrounds you should define a redundent background-color for browsers that don't display images.

menu indicator character/image ["text"|"image.gif"|"none"]

Specify a textual image or character which is used to indicate a nested menu, or "none" if you don't want an indicator. If you use an image you must also provide alt text. To help you choose suitable alt text or characters, please read The semantics of menu indicators.

You cannot use entities such as … or … because the characters are created using createTextNode, which cannot create entities (there is a createEntityReference method, but at the time of writing no browser implements it).

You can use unicode characters [PDF] in the form of escaped hex values, for example "\u21d2" is a right-pointing arrow. However these are not particularly well supported cross-browser, and might be problematic in browser-based screenreaders - for example, Home Page Reader sees "?" for an unknown character, and says question mark.

Indicators are not supported in Mac/IE5; image indicators are slightly sketchy in Mozilla Gecko browsers 0.9.4 (Netscape 6.2) or earlier - they don't always appear.

menu indicator rollover image ["image.gif"|"none"]

If you're using an image indicator you can also specify a rollover image.

If you're using a textual indicator you cannot specify a separate rollover as such - the characters will do whatever CSS changes they inherit from their parent link.

clipping width of indicator image ["n" pixels]

If you're using image indicators you can specify the clipping-width of the image, as an integer in pixels. You musn't include the "px" unit, just the number. This is specifically a clipping region rather than a width - if the value you specify is less than the width of the actual image, only the clipped region will be visible.

alt text of indicator image ["text"]

If you use image arrows you must define alternative text, for the benefit of browsers that don't display images. To help you choose suitable text or characters, please read The semantics of menu indicators.