Developer's manual

Menus that open onclick

If you prefer, you can have menus open from an onclick event, rather than onmouseover. Have a look at the menus open onclick demo to see this in action.

Applying onclick

You enable it on a per-item basis by adding the class name "onclick" to the relevant list-item:

<li class="onclick"><a href="/menu/">About us</a>

The usual thing to do would be to apply that class to each of the items in the navbar, and leave the submenus as regular mouseovers. But you could add it to all of them if you wanted (which you would do to build an expanding menu), or conversely, you could have a navbar which is mostly mouseover driven, but maybe one or two of the items open onclick for particular reason.

Notice how the link still has an href - that's for the benefit of browsers which don't support the menus, or where scripting is not available, so that the link still does something.

Onclick behaviors

The onclick handler will only apply to events generated by the mouse - navigating with the keyboard is not affected (ie, the menus open onfocus and the Enter key follows a link, as normal).

Pressing the enter key on a link does actually generate an onclick event, but in this case it's ignored, otherwise the links wouldn't work in browser-based screenreaders. This is also what happens in browsers that don't support the menus, or if you attach the "onclick" classname to a list-item that doesn't have a menu, or in Mac/IE5 or MSN for OS X, which don't support this functionality - the links are just followed like regular links.

Therefore you should not use "onclick" for non-link items in the main navigation bar, only for active links, because for unsupported browsers those links will do nothing at all. But really that's a moot point - you shouldn't have non-link items in the main navbar at all, for exactly the same reason.

Normally the default return value of a menu-triggering onclick event would be cancelled - that is, if you click the link it just opens the menu, and doesn't follow the link as well. It wouldn't be much use if it did.

Or at least, it wouldn't be if you didn't have a choice, but you do - you can pass an optional boolean argument through the "onclick" classname, to indicate whether the link should be followed (true) or not (false):

With standard dropdown or flyout menus this is basically no use. But if you're making an expanding menu which is inside a frameset or MDI, you might find it useful behavior.

Menu timers

Menus which are activated onclick do not go through the open timer - they open straight away. The close timer still works as normal, but you may prefer to set it to a value of "never", so that menu branches stay open unless you activate a different one (or click on the page to reset), rather than closing onmouseout.


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.