Developer's manual

Applying onclick

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

• Skip code example

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

The "follow link" argument

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):

• Skip code example

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

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

A value of (false) is equivalent to not having an argument at all. A value of (true) will follow the link if (and only if) the click event is a menu-opening command - if the menu is already open then the click event will close it and not follow the link.

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.