Thursday, May 15, 2008

Nested Menus in JavaScript: A new theme for jQuery UI Tabs

I accidentally discovered the jQuery UI Tabs widget for JavaScript rendering of tabs. I found this via the new uPortal 3 quickstart where the new skin uses the jQuery UI library extensively.

Originally, the tabs code was produced by Klaus Hartl and it is now an official part of the jQuery UI project. Something that I found particularly interesting is the nested tabs demo example. Although from one perspective this demonstrates nesting of tab menus, in the current example it doesn't look like a single nested tab menu navigation system. I thought I would attempt to theme this example to look more like the nested tab example from the navigation tabs section of the Yahoo! Design Pattern Library.

Click this link for a working example of jQuery UI nested tabs - Yahoo! style

To give the example a little more sophistication, I created another example using my new theme which makes use of the Google AJAX Feed API

Click this link for a working example of jQuery UI nested tabs - Yahoo! style accessing Google feeds

You are very welcome to download my example code jQueryNestedMenus.zip

A little fly in the ointment - Best use is DHTML/AJAX applications

The jQuery documentation says that Tabs supports loading tab content via Ajax in an unobtrusive manner and goes on to say that this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled. You could argue that since the menu navigation will disappear if you clicked on a link when JavaScript is disabled then this is not a particularly graceful outcome!

Therefore, I think that using this widget for creating navigational menu systems should be confined to AJAX/DHTML JavaScript enabled applications. If you want a web application that still provides menus when JavaScript is disabled you should use a different approach (e.g. see my previous blog entry on Simple Nested Tab Menus for Java web applications).