Developer's manual

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:

• Skip code example

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

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

Or image-icons:

• Skip code example

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

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:

• Skip code example

.icon {
	margin-right:7px;
	}

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.