HTML menus

Menus - like the file menu at the top of every application - have always been tricky to code in HTML. They involved reams of javascript and endless workarounds for the deficiencies in each browser.

The HTML 5 working group are talking about a new HTML tag to enable menus. This would be great, but for now, why not just use the ordered list tag <ol>? After all, that's what menus are - ordered lists.

So it's a great relief to see menus done properly - with no javascript in sight, just the <ol> tag and some CSS.

But before we congratulate ourselves on proving the power of HTML yet again, it's worth asking what menus are for in the first place.

I count three uses:

1. Site navigation hyperlinks (e.g. the left hand pane of http://www.microsoft.com/sql/default.mspx)
2. Standard application menus (e.g. the MS Word file menu)
3. Context-sensitive application menus (e.g. right mouse button options)

On the web, most people just think of the first use, because web pages still aren't seen as applications in their own right. For those using web-based spreadsheets, however, uses 2 and 3 are more important - rather than navigating to different pages, the menu options manipulate the existing page.

Most desktop-based applications are just as poor at menus as web-based ones. Even commonly used ones - such as Internet Explorer itself - do a bad job here. There is a very complicated File-Edit-View-Favorites-Tools-Help, there are the standard buttons (back / forward / refresh), there is the address bar plus optional extra bars, and only then do you get the page itself, which will often have its own menus too.

So Microsoft is due some praise for recognizing this, and innovating with the new Office 2007 ribbon, which combines uses 2 and 3. Maybe they did it to stay ahead of websites like Google Docs; if so, the effect was diminished by successfully mimicking it in the MS Office website!

How is a ribbon menu best achieved on the web? Well, in theory, just using additional <ol> tags and CSS. In practice, this is a nightmare without a properly CSS-compliant browser; even Internet Explorer 7 falls somewhat short. But never underestimate the resourcefulness of web developers - there's plenty of innovation to come using existing tools. I wouldn't be surprised if ribbons started appearing on websites very soon.

Context-sensitive menus are by far the rarest on the web. In Google spreadsheets, an HTML menu opens up when the right mouse button is clicked on a cell. To be frank, I'm not sure this is good practice - think of smartphones, PDAs, Tablet PCs, Apple Macs, and voice-activated browsers - none have a "right mouse button". And a huge proportion of users never think of using the right mouse button (see Jon Udell's discussion on saving web pages) - instead, context-sensitive menus should probably appear as part of a ribbon.

In fact, it's pretty easy to code context sensitive menus using simple javascript. For example, you could dynamically swap out the contents of a menu <ol> tag based on browser focus and DOM events.

So I predict a migration to menus based on <ol> and CSS.

Continued user interface innovation will make menus as friendly and accessible as possible. Menus inspired by the Office 2007 ribbon will become more popular for true web applications, like Hotmail or Google Spreadsheets.

And context-sensitive menus will appear through the web, as developers realise the power of simple HTML, CSS and javascript.