Skip to: content, navigation

How to use the program

Design controls

The orange column, on the left by default, has controls for designing and laying out your navigation bars. Design controls are split into several groups:

Navbar orientation

alignment

The navbar can be a "vertical" column or a "horizontal" row.

Navbar positioning

positioning

You can specify "relative", "absolute" or "fixed" positioning.

CSS position:fixed is not supported in any version of Internet Explorer, and is too unstable to apply for Mozilla Gecko browsers earlier than 1.3b (Netscape 7.1); for these browsers it degrades to absolute.

But that being the case, you should avoid putting a fixed navbar inside another positioned container - fixed positioning is not contextual with its parent the way absolute positioning is, so you could end up with a huge cross-browser discrepancy.

For more about positioning, please see: Choosing a positioning mode.

horizontal align

Specify "left", "right" or "rtl" alignment.

A value of "rtl" is essentially the same as "right", except that it also changes the writing-mode, for right-to-left or bi-directional text. If you have a horizontal navbar then RTL mode will automatically invert the list (so that the links flow from right to left), which in fact happens naturally through the use of float:right. In RTL mode, then, a horizontal navbar is always anchored from the right edge of the page.

In standard LTR mode, a horizontal navbar is similarly always anchored from the left edge of the page, even if you've set it to be right-aligned. That's because right-alignment of a horizontal navbar isn't actually supported, except in RTL mode. The only way to implement it (without knowing the width of the navbar in advance, which we don't) would be to use float:right on the list-items, like we did for RTL mode, but that's not a useable solution here - it completely breaks in Mac/IE5, and Opera 5 and 6. In RTL mode that doesn't matter, because they don't support RTL languages anyway.

If you want right alignment of an LTR navbar, you'll need to set a fixed width on the navbar <ul> and implement right alignment manually - as a left-offset equal to the container width minus the navbar width.

Similarly if you want center alignment, you can put a relatively-positioned, left-aligned navbar inside a fixed-width, center-aligned container.

Please note: the text in an RTL demo will not display correctly on this site, because it has the wrong character set and encoding. But rest assured, it will be fine when used on a real RTL or bi-directional page.

vertical align

Specify "top" or "bottom" vertical alignment.

With an absolutely-positioned navbar, bottom alignment has massive inconsistencies in how it's interpreted - in Mac/IE5 and some Opera 7 builds, the navbar is placed at the bottom of the page; in most other supported browsers it's the bottom of the viewport; in Opera 5 and 6 it doesn't work at all, and the navbar is placed at the top.

But with a relatively-positioned navbar, bottom alignment is just like top alignment, except that the y position pushes it upwards, rather than downwards.

x position

The left or right position of the navbar, which can be specified in "em", "ex", "px" or "pt". Percentage is not supported because it doesn't work right in IE. Negative values are not supported. You cannot exclude the unit unless the value is "0".

Although you can use "ex" units, I wouldn't recommend them, because browsers have very different ideas about how big they are.

y position

The top or bottom position of the navbar, which can be specified in "em", "ex", "px" or "pt". Percentage is not supported because it doesn't work right in IE. Negative values are not supported. You cannot exclude the unit unless the value is "0".

z index

Specify a number up to "32768" for the z-index (stacking order) of the navbar, with respect to other positioned elements in the same context.

width (when vertical)

Specify the width of a vertical navbar, using "em", "ex", "px" or "pt". 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.

This only applies to a vertical navbar - with a horizontal navbar the item widths are always "auto"; if you want them to have defined widths you'll need to address them from additional CSS.

Horizontal continuation strip

background

Specify the continuation strip background, as a colorname, a hex, rgb, rgba or hsl color value, or an image. Images can be GIF, JPEG (JPG/JPE), PNG, MNG or BMP.

Set this to "none" if you don't want a visible continuation strip.

Although rgba and hsl are supported, they're only actually useable in Safari 1.2 and recent Mozilla browsers, respectively, as far as I know.

overflow margins

The margin between items in a horizontal navbar is margin-right. If this box is checked then the same amount will also be applied to margin-bottom.

This makes the navbar look nicer when split into multiple rows, which will happen if the window is narrower than the navbar (unless the width of the navbar, or its container, is otherwise constrained). But of course it makes the background slightly taller than the links, so if you have a visible continuation strip you may prefer to set this to "no".

Link boxes

margins

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 width

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

collapse borders (when margin is zero)

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 you are using border collapse you should probably avoid border rollovers, since the borders will overlap.

left/right padding

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

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

Fonts

size

Specify the navbar font size using any valid CSS value.

I strongly recommend you do not use "px" or "pt", because they create unscaleable text in Win/IE. I think the best units to use are "em" or "%".

weight

Specify the font weight of navbar links, as an absolute value (bold or normal), a relative value (bolder or lighter), or a number from 100 to 900.

family

Specify the font-family used for navbar links, as one or more specific or generic family names.

Since you can't predict what fonts an end-user will have installed, you should always end with a generic - "serif", "sans-serif", "cursive", "fantasy" or "monospace".

decoration

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

There is a text-decoration value "blink", but you musn't use it, and the javascript validation will reject 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.

align

Specify the text-alignment of navbar links.

Unvisited, Rollover and Visited styles

border colors

Specify one, two or four border colors, as colornames, hex, rgb, rgba or hsl color values.

Although rgba and hsl are supported, they're only actually useable in Safari 1.2 and recent Mozilla browsers, respectively, as far as I know.

border styles

Specify one, two or four border styles, using any valid CSS values.

background

Specify the link background, as a colorname, a hex, rgb, rgba or hsl color value, or an image. Images can be GIF, JPEG (JPG/JPE), PNG, MNG or BMP. If you want transparency you can use the colorname "transparent".

Unvisited, visited and rollover backgrounds do not have to be of the same type - you can mix colors and images.

Please note: image backgrounds will not be applied in Opera 5 or 6, because they don't support background-image in element pseudo-classes. So ensure that 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.

Although rgba and hsl are supported, they're only actually useable in Safari 1.2 and recent Mozilla browsers, respectively, as far as I know.

color

Specify the text color, as a colorname, a hex, rgb, rgba or hsl color value.

Although rgba and hsl are supported, they're only actually useable in Safari 1.2 and recent Mozilla browsers, respectively, as far as I know.

font style

Specify the font style.

additional CSS

You can use this space to pass any additional CSS to the 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.