UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
This is the Ultimate Dropdown Menu quick-start guide.
You can use the form below to search through the manual:
With our in-depth knowledge we can save you time and money in development.
The underlying structure is an HTML unordered-list:
<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>
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>
<ul>
<li><a href="/products/">Products</a></li>
<li><a href="/services/">Services</a></li>
</ul>
</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 -->
<!-- http://www.udm4.com/ -->
<script type="text/javascript"
src="/udm-resources/udm-custom.js"></script>
<script type="text/javascript"
src="/udm-resources/udm-control.js"></script>
<script type="text/javascript"
src="/udm-resources/udm-style.js"></script>
Then for core functionality you only need one script in
the <body>:
<script type="text/javascript"
src="/udm-resources/udm-dom.js"></script>
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"
src="/udm-resources/udm-mod-keyboard.js"></script>
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:
um.menuClasses['orangeMenu']
um.itemClasses['orangeMenuItem']
go with this HTML:
<ul class="orangeMenu">
<li class="orangeMenuItem">
...
</li>
</ul>
Both menu and menu-item classes cascade (the styles affect nested elements of the same type).
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.
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>
<li><h3><a href="/menu/">About</a></h3>
</li>
<li><h3><a href="/contact/">Contact</a></h3>
</li>
</ul>
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
