jQuery iPod-style Drilldown Menu
Posted by Scott and Maggie on 05/14/2008
- Topics:
- ajax
- jQuery
- ui design
- visual design
We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into traditional dropdown or fly-out menus.
This drilldown menu provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, breadcrumb links appear above the menu options to both deliver feedback and allow quick access back to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you're moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.
05/16/08 Update: we've added new working examples below.
Working Demos:
The simplest version works like the iPod menu or standard fly-out menu, where the primary goal is to select an end (leaf) node. When you select a category (indicated with an arrow), the menu drills you down into the next level of hierarchy:
It's also possible to configure the menu so that users can select either a category or a leaf node. This is useful for global navigation where users may want to select a higher level category page (Finance) or a detailed page (Mortgage). In this case, the menu options are separated into two parts: a selectable category name (text on the left) and, if applicable, a sub-menu drilldown navigation link (arrow on the right):
Development Notes
We built this demo using the principles of Progressive Enhancement. Markup consists of an ordinary HTML link to the menu data, so that when a device can't handle advanced scripting or has javascript disabled the link is still perfectly usable. As the page loads we run a quick test using our testUserDevice.js script to determine if the user's device is capable of rendering an enhanced experience. If the device passes our test, we fetch the data from the HREF attribute via Ajax and use it to transform the link into the interactive widget shown above. For more information on testUserDevice.js and Progressive Enhancement, check out Delivering the right experience to the right device.
Code Usage
The iPod-style drilldown menu widget shown here is not coded for ease of modification, but is free to reuse and modify with a proper attribution to Filament Group. Feel free to visit our demo page and view the source code to see how it works.
Comments
Great hierarchical menu, I haven’t seen a website use this type of menu anywhere. Nice work.
Comment by Marc Grabanski on 05/15 at 08:49 PM
I like the idea and design, though the usage of animations could be improved: The slide-down of the selected category, after its content slided in from the right, is really annoying. One approach may be to reserver the space for the breadcrump and selected category so that the category list is always at the same position.
Another idea: Selecting something from the creadcrump could slide the list back to the right. That would be closer to the actual iPod behaviour.
Comment by Jörn Zaefferer on 05/16 at 04:36 AM
Very nice hierarchical menu indeed; Seeing some great potential here, mainly as a replacement to “the bunch of select elements that could be hotwired to eachother” (where a selection in the first one would manipulate the second one, etc.).
Kudos!
Comment by Bramus! on 05/16 at 04:38 AM
@Jörn - Thanks for the helpful comment. We agree the breadcrumb slide down was a bit distracting, so we sped up / smoothed out the transitions. Good idea to slide the menus out when choosing a breadcrumb—we’ll put that on the feature list for version 2.
Comment by Maggie (Filament) on 05/16 at 09:48 AM
Nice, thats much better already!
Comment by Jörn Zaefferer on 05/16 at 10:13 AM
Bravo!
Comment by Federico on 05/17 at 06:50 AM
That is pretty cool, nice jobs.
Comment by Bob on 05/17 at 11:13 AM
deviantart uses a similar menu
Comment by argonauta on 05/17 at 01:02 PM
I just tried it out and didn’t understand how it works. Tried clicking, but instead of going down 1 hierarchy level, it just seletected what I clicked on. Tried clicking the small triangle, no effect. Tried the mousewheel, no effect. Tried cursor keys, no effect. Tried space bar, no effect. Sorry, but this is bad bad usability.
Comment by Zeno Ermelinger on 05/17 at 01:02 PM
nice plugin, i am already thinking where i can use this kind of menu.
Comment by thecancerus on 05/17 at 01:38 PM
Great job. Shouldn’t the menu remember the last position when clicked again?
Comment by florin on 05/17 at 03:09 PM
I have a similar menu running on http://www.Flugpo.com at the top next to the logo to chose your region when looking for classifieds.
Comment by Stefan Hayden on 05/17 at 06:08 PM
It’s a nice toy implementation, but without a scroll wheel, it’s useless.
I’d rather just use a hover based menu, which is intended for a mouse. Having to make four clicks to get somewhere? That is an application I won’t be using for long.
Comment by js on 05/18 at 05:03 AM
I guess the degradation for “can’t handle advanced scripting” gets applied to Safari (3.1.1)? ...since in Safari(Mac) the system displays only an outline of unordered lists.
What sort of “advanced JS” do you think the latest Safari isn’t handling - or does you agent-detection algorithm just decline to offer this to Safari users?
Comment by Ricardo on 05/18 at 06:35 AM
the irony: does not work on iPhone…
Comment by regis on 05/18 at 10:12 AM
font on the category looks small. I dont usual to look that font.. thanx
Comment by baobaz on 05/19 at 07:27 PM
@Zeno - we just posted updated working demos, which may clear up some of the confusion. The first demo is probably closer to what you expected in terms of iPod menu behavior, and the second (the demo you saw earlier) is a slightly more complex version that lets you select a category node or leaf node.
@js - as noted in the introduction, this menu is not intended as a replacement for a simple hover menu, rather, its a good alternative to use when working with deeply nested hierarchical data.
Comment by Maggie (Filament) on 05/20 at 04:15 PM
@Ricardo - we’ve got Safari 3 (Mac) here and the menus work fine. Is it possible you were viewing the page during an update?
To your question about which browsers pass/fail our capabilities test, check out the matrix at the end of our article: http://www.filamentgroup.com/lab/delivering_the_right_experience_to_the_right_device/
Comment by Maggie (Filament) on 05/20 at 04:21 PM
Now that is nice! The sitemap-style layout of the navigation page is truly the icing on the cake. Beautiful!
Comment by Miami Web Design on 05/21 at 01:12 PM
Wow this jQuery Effect really useful for me, thanks
Comment by IndoDX on 06/04 at 06:40 PM
I find the breadcrunch to also be quiet confusal. The slidesbar is good but like Bjorn, the ideas to putting the breadloaf in there is again quiet annoys.
Comment by Djerk Fergustein on 06/04 at 09:54 PM
so we don’t get download?
Comment by Dejan Cancarevic on 06/19 at 03:00 PM
Right on!! and very clean and the transitions....I gotta tell the others at work about this one.
Comment by Real Estate Postcard Guy on 06/20 at 04:33 PM