UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
The Horizontal Menus extension creates horizontal submenus for a horizontal navbar.
View the demo to see it in action. Each menu will have the same width as the main navbar, with deeper levels arranged in rows underneath each other.
Download the
Horizontal Menus script,
copy it into your udm-resources folder,
and add the script include to the body section:
<!-- horizontal menus extension -->
<script type="text/javascript"
src="/udm-resources/udm-x-horizontal.js"></script>
Then to re-orient the menu items, add the following CSS to your page:
/* horizontal menu styling */
#udm ul li { width:auto; float:left !important; }
#udm ul li a { white-space:nowrap; }
This extension can only be used with a horizontal navbar; it won't have any effect on the menus of a vertical navbar. At present, this extension does not support being used with RTL or bi-directional text, an omission that will be corrected in a future update.
The vertical offset between rows of horizontal menus is controlled using the y-offset values in the um.navbar and um.menus arrays, as normal; this can be a positive or negative amount.
The horizontal offset is not controllable - all the menus are the same width, and lined up on the same axis; the x-offset values in those arrays will no longer have any effect. If there are more items in a menu that fit into a single row, they'll wrap into multiple rows.
There are also certain behavioral and design settings that you should pay special attention to when using this extension:
The horizontal overflow
setting determines how a horizontal navbar behaves when it doesn't have enough
space - whether it wraps to multiple lines ("flexible")
or remains rigid as a single row ("rigid").
To use this extension you must have the overflow set to
"rigid", because horizontal menus cannot have a fluid width
(they can't vary with window size, although they can still expand with text size).
This further implies that you can't be using the
lite or ultra-lite menu script.
On the demo page you may notice how the close timer is slower than normal. I've done this to improve the usability, because moving your mouse across a structure like this creates a lot more "incidental" movement (movement where the action would close a current menu immediately, were it not for the close timer).
But you may not want the menus to close automatically at all -
in this demo it's necessary because the menu structure is quite large,
and the larger branches may
obscure some of the text when fully open. But if you have smaller branches,
or a design in which there's never any overlap, you may prefer
to have the menus remain visible until manually dismissed
(by clicking the document, in the expected way).
You can do this by setting the
close timer to a value of "never".
Horizontal menus work by applying float to the menu items,
orientating them along a horizontal axis; but the
menu-item margins and
border-collapse properties were designed to work with
items oriented on a vertical axis. When
they're applied to the items of a horizontal menu, is that
they no longer line up properly. Some will be higher than others in an uneven row.
Therefore you should set the
menu-item margins to "0" and the
border-collapse to "separate". You can
get visual separation between the menu's outer border and the items inside using
menu padding. But if you do need spacing
between the individual items, you can use the
menu-item additional CSS to apply the appropriate margins manually, for example:
'margin-right:3px !important;', // additional link CSS
'margin-right:3px !important;', // additional hover/focus CSS
'', // additional visited CSS
This extension is not supported in Mac/IE5, Win/IE5.0, Opera earlier than 7.5, or Mozilla browsers earlier than 1.3. Allowing the menus to diplay without it would cause a significant layout discrepancy, therefore if you use this extension, these unsupported browsers will have no menus at all, just the main navbar.
Keyboard navigation still works intuitively with horizontal menus, as the script re-maps keystrokes to match the new orientation - so moving between items in a submenu is now left and right, while moving between menu levels is now up and down.
However, horizontal menus with a large number of items can also wrap into multiple rows, but it's not practical for the script to implement two-dimensional navigation around the rows in a single menu, as would be ideal. To navigate such a menu you can only use left and right, and the focus will wrap around to each row in order, the same as using Tab and Shift-Tab.
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
