Developer's manual

Quick start

This is the Ultimate Dropdown Menu quick-start guide.

Search the manual

You can use the form below to search through the manual:

We'll customise for you!

With our in-depth knowledge we can save you time and money in development.

Get a quote today!

Setting it up

The underlying structure is an HTML unordered-list:

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

You can use any valid attributes on the list elements without restriction, except that the root <ul> must have both the id and class name of "udm".

The line-break before each closing </li> is only necessary for a horizontal navbar (to avoid a rendering bug in Internet Explorer 5.0 for Mac OS9 or earlier); it's not necessary for menus, or for a vertical navbar.

Menus are nested lists inside the navbar list-items. Please keep an eye on well-formedness - nested lists go before a closing </li> not after it:

<li><a href="/menu/">About</a>
		<li><a href="/products/">Products</a></li>
		<li><a href="/services/">Services</a></li>

You can put any other 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). Furthermore you must not have comments anywhere inside the list.

All items must be anchors, so if you want a submenu trigger that's not an active link, don't include an href but give it the class name "nohref" instead:

<a class="nohref"> ... </a>

You shouldn't have non-link items on the main navigation bar, only within menus, because for unsupported browsers, the main navigation bar may be all they have.

Once you have your list, you need three scripts in the <head>:

<!-- ULTIMATE DROP DOWN MENU Version 4.6 by Brothercake -->
<!-- -->
<script type="text/javascript"
<script type="text/javascript"
<script type="text/javascript"

Then for core functionality you only need one script in the <body>:

<script type="text/javascript"

But for best accessibility I strongly recommend including the keyboard navigation module as well (which you already have in your udm-resources folder). This should come after the udm-dom.js script include:

<script type="text/javascript"


The configuration file is called udm-custom.js, which you'll find in your udm-resources folder. It's well commented, and should be fairly self-explanatory - there are five control arrays to specify the orientation, list output, menu behaviors, reset behaviors, and horizontal continuation strip; then there are four style arrays for the default navbar, navbar-item, menu and menu-item styles.

You can also have override classes for individual menus and menu-items, which are defined in named arrays and then identified with a corresponding class name; for example, these arrays:



go with this HTML:

<ul class="orangeMenu">
	<li class="orangeMenuItem">

Both menu and menu-item classes cascade (the styles affect nested elements of the same type).

Final steps

For production use, once your design is finished, you can convert your javascript style sheet into normal CSS - using the css-generator program in the udm-resources folder. Simply paste the generated CSS into udm-style.css (also in the udm-resources folder), and include that instead of udm-style.js

You can also significantly reduce the size of your udm-custom.js file by removing unnecessary comments and whitespace.

Accessibility considerations

Some user-agents cannot see the menus, only the main navigation bar - this includes partially-supported browsers such as Opera 5 and 6, and any fully-supported browser with javascript disabled. Therefore, since the navbar is the only component which is universally accessible, you will need to provide duplicate links for submenu content - anything which is accessible from the menus must also be accessible without them.

I think it's also a good idea to add headings both before and inside the navigation bar, so that screenreaders and other serial browsers have better random-access using their "headings-reading mode" or equivalent. For example:

<h2 id="navbar">Site navigation</h2>

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


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.