Horizontal Menus extension

Version 1.1

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"

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; }

Implementation notes

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:

Horizontal overflow

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.

The menu close timer

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".

Menu-item margins and border-collapse

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

Browser notes

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.

Accessibility notes

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.


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.