Developer's manual

• Manual →
• Setting it up →
• Building the navbar list

Building the navbar list

The first thing to do is build a navbar list, like this:

• Skip code example

<ul id="udm" class="udm">
	<li><a href="/">Home</a>
	</li>
	<li><a href="/menu/">About</a>
	</li>
	<li><a href="/contact/">Contact</a>
	</li>
</ul>

There are very few restrictions on the list HTML, but there are some:

<ul> attributes

The root <ul> must have both the id and class name of "udm"; they must be exactly that - class="udm foo bar" is not allowed. Otherwise, no restrictions.

<li> attributes

The id might be needed later on - if you have dynamically created menus, or you use popup menus; the actual id value will be your choice. Otherwise, no restrictions.

<a> attributes

No restrictions.

Other HTML inside the list

You can put any valid HTML inside <a> or betwen <li> and <a>; but you cannot wrap other elements around a menu <ul>, nor put anything between <ul> and <li> (which wouldn't be valid anyway).

Comments

Comments are not allowed anywhere inside the list, because they'll change other node relationships.

Whitespace

The only browser for which whitespace makes any difference at all is the Mac version of Internet Explorer 5. It makes a difference because it can't be removed, or else the rendering becomes unstable. The issue is unlikely to arise if you hand-code your pages, however if your navbar is generated automatically, make sure that some whitespace is included:

1. a line-break after each </li> and </ul>.
2. a line-break between the </li> and </a> of each horizontal navbar item - this is purely for the benefit of Mac/IE5.0 on OS9 or earlier, and only necessary if you're using a horizontal navbar; if you have a vertical nav, or you're working for a predictable user base that doesn't include Mac/IE5, then it doesn't matter.

• Advanced search
• Sitemap
• Home