Developer's manual

HTML development

The underlying HTML is restricted in some ways - it must be an unordered-list, all items must be <li><a> pairs, and additional HTML is only allowed inside <a> or between <li> and <a>. But within those constraints there's a lot you can do.

Adding a second navbar

The script can style any number of additional single navbars to the same core configuration. Additional navbars should also have the class name of "udm", but they must only have the class name, not the id.

Have a look at the Two navbars demo so see this in action. The second list has the same styles as the top navbar, because of its "udm" class name, but it also has its own id of "secondNavbar". In this case the id is only used to set a z-index on the navbar, placing it below the level of the first, but you could also use this id to drill further into the list and style it differently. For more about that please see the CSS development section.

These additional navbars can only be single navbars - they can't have submenus coming from them. But if do you want another menu generating navbar, or you want multiple navbars with completely different configurations (such as one vertical and one horizontal), you can do this using a different technique - described in the article: Getting more out of the CSS Generator.

Adding HTML

You can add any valid HTML inside the links, for example simple emphasis:

	<a href="/"><strong>Company</strong> home page</a>

	<a href="/products/">
		<em>Products</em> and <em>Services</em>

Or image-icons:

	<a href="/menu/">
		<img src="/udm-resources/icon.gif" 
			class="icon" width="7" height="9" alt="*" />
			About us

There I've added a class name to the image so I can give it some CSS - in this case a right-margin, to put space between it and the link text:

.icon {

You can also put HTML between the list-items and links, and one use for this it to add headings into the navigation bar. This should improve usability for people using a screenreader or other serial-browser, by allowing them to skip from branch to branch using their "headings-reading mode" or equivalent. For more about this please see: Navbar headings.


We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.