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
You should see the browse menu of DeviantArt, that’s just sweat!
Comment by kelley van Evert on 07/06 at 10:53 AM
It’s possible to store the position selected? If i change the page i lost the position. :( Great Work...this implementation it’s possible?
Comment by Francesco on 07/07 at 06:32 PM
Holy macaroni, this is really damn awesome!!!!!!
Comment by Ardi on 07/08 at 05:00 AM
Nice work ... innovative… out of box thinking ... keep on improving it.
Comment by samdhal on 07/16 at 02:01 AM
I love the menu, but it isn’t accessible at all…
Why would you use a remote page to load the menu rather than parsing a specific menu that already exists on the page? I’d love to use this menu, but it doesn’t degrade at all.
I’m baffled at this decision. It’s an amazing menu, but completely useless to anyone who cares about accessibility…
Comment by Greg-J on 07/16 at 03:17 PM
@Greg-J: Thanks for your concern about the accessibility of this menu. Since accessibility is something we care about deeply here at Filament, I’ll summarize our approach to this code and describe why it is accessible and how it degrades for non-javascript users.
First of all, as you pointed out, the menu content is indeed being Ajax’d in from a separate file. This is not a requirement of the menu plugin itself, but rather how we chose to set up the demonstration for purposes of clarity. The plugin simply accepts a string of HTML for its menu content, which can be gathered from anywhere you’d like. It could be content that follows the menu button in the markup, or it could be generated in another file; whatever suits the particular use case. Using Ajax as we have in this demo does not make the menu any less accessible, as the menu content is injected into the page just like any other HTML and can be accessed by any browser or screen reading software that supports javascript.
As for degrading, this menu degrades fine for devices that don’t have javascript. Since we’re using external menu content, the menu “button” actually starts out as an ordinary link to the menu content. If you disable javascript, you’ll see that clicking the menu link will bring you to the menu content page that we’re pulling in via Ajax. This is not the best approach for all situations, but there are many scenarios in which generating a menu externally would be needed, such as a menu with content that changes depending on application state. Regardless, without javascript, you can still use the menu and if it is being used as navigation; this is a great fallback.
If the content were in the page instead, the menu button link would ideally have an href value that corresponds to the content’s id attribute, thereby jumping non-javascript users to the menu content when the button is clicked.
That aside, there are areas where this example could be made more accessible. We’re currently inserting the menu content into an area of the DOM that’s not directly after the element that was clicked. A better approach might be to inject it directly after the menu button in the markup, but in complex interfaces, this is often not an option due to browser limitations with z-indexing and keeping the menu content above everything else on the page. For this reason, we have injected the markup at the end of the body, but this is again not a requirement of the plugin, simply how we set up our demo.
As a recap, we are huge advocates of accessibility and progressive enhancement (see our sidebar for examples). Often you’ll find that javascript widgets are built in a flexible manner to allow a developer to implement using these practices at his/her needs permit. Nothing about this script should get in the way of you integrating it using current best practices.
Comment by Scott (Filament) on 07/16 at 04:09 PM
If I read that right, you’re saying that I could have the menu read from a structured unordered list that is in the document flow rather than an external page?
If not, could we place a menu on the page and hide it as long as the drilldown menu was loaded?
I hope that was clear enough.
I also appreciate your timely and direct response. It’s a very rare thing these days.
Comment by Greg-J on 07/16 at 04:37 PM
@Greg-J: Yes, the menu markup could be served with the page and hidden until it’s loaded into the menu. As Scott explained, the script doesn’t care where the markup comes from, however it’s good to note that the script *does* assume that the markup is an unordered list.
Comment by Maggie (Filament) on 07/17 at 10:17 AM
Great project ~ thanks for putting it out there.
I’ve been trying to code the menu to be open by default, has anyone scripted this successfully or could point me toward a formula for getting this control?
Comment by marco on 07/22 at 11:58 AM
there seems to be a limit as to how many list elements one can have in the unordered lists. Or it may me a limit in characters. I have been testing this but haven’t quite been able to nail it down. any ideas?
Comment by Shaun on 08/05 at 11:28 AM
nevermind the above comment. The maxHeight variable was limiting the amount of listing possible on a page. However, it does not add a scrollbar when it excedes the set amount of pixels. rather, the menu link goes directly to the html page containing the item list.
Comment by Shaun on 08/05 at 12:58 PM
http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/
Comment by shaun on 08/05 at 02:36 PM
@Shaun: I’ve been kicking myself with the exact same problem!
The code *is* setup to add a scroll bar when the height of the list items exceeds the maxHeight menu setting, but there’s an error in the JavaScript being called when that happens.
Hence, the error causes the JS to abort and the default behaviour is applied, i.e. the browser takes you to the link specified in href attribute since the JS onclick method isn’t called.
The offending error is in menus.jQuery.js, line 146. The function pxToEm() doesn’t exist. If you remove it from the call, the width: CSS attribute is set in pixels rather than em, but the menu works! Of course you could implement the function rather than deleting it too…
It would be nice however if the scroll bar didn’t apply to every menu level, rather just those that needed it, but I guess that’s an exercise for the reader
Comment by Will Croft on 08/12 at 09:42 AM
Hi,
I really like this menu. So much so that I attempted to use it in a new ASP.Net based CMS I’m developing. Unfortunately, I couldn’t quite get it to work, plus I wasn’t happy having to have a seperate page to display the menu items. So, being a typical developer I wrote one myself for the hell of it. The end result is a very similar menu to this one. However, it is alot smaller - though nowhere near as sophisticated as your version!
One thing I have done is implemented hoverintent on the sub-menu selectors which works well.
Anyway, I’d appreciate your feedback - it’s not finished yet - or tested really for that matter.
The url is http://aob.silver-pride.com/post/Quickmenu-JQuery-plugin-teaser.aspx
Graham
Comment by I've done a similar menu on 09/08 at 12:18 PM
great menu really, easy to customize, great thing for all sort of archive kind of data i m planning to use on my site im working on..it will be some kind of collection of jquery plug in’s…
i have one question, same one marco put up before , but it came unnoticed…
so here once again…
is it possible to have menu open onload?
thx!
Comment by mario on 09/09 at 02:10 AM
I have the same question posted above. I am planning to use the menu on the left side of the page and when any menu item is clicked I want to show the selected menu item. Is there any way to do that?
Thanks
Comment by rcrathore on 09/11 at 10:25 AM
I would like to have menu in html rather than externally as menuNavigator.html.
Is there any way I can put menu items in the main html?
could anyone help me please?
Comment by elvisparsley on 09/13 at 10:11 AM
nice
Comment by aqlx86 on 09/15 at 04:08 AM
Nice menu
Comment by Minh Trung on 09/16 at 04:13 AM
I am having trouble getting your menu to work on my local machine. The button takes me to the menuNavigator.html page (a new page) instead of loading the data into the menu. I am on PC with IE7 - however I get the same result in Firefox and Safari. Perhaps this is an AJAX factor (?).
As an alternative, how would I write the function to get the content from a div (id="mycontent") on the same page.
I would like to implement this menu on a client’s site - but can’t get them to look at it anbd agree if it doesn’t work locally.
Comment by ali white on 09/21 at 01:49 AM
Ok - I’ve got it working now, except that the jQuery library and the utilities scripts seem to have some dependancies that I am unable to resolve, so I have to http them from your site. Does anyone have any ideas how I can resolve this?
Like Florin, I agree that it’s be good to keep the menu open on selecting the item and have done so by disabling the ‘kill’ function.
Also, like Mario, I would like to have the menu/s open onload? Is there an easy way to achieve this?
Comment by ali white on 09/22 at 05:43 PM
Nice work. My compliments. Anyway I would like to use on a simple site and I don’t know how to make it work so that when I select one of the last nodes, it goes to the link specified. Always appear the alert box telling me that I’ve selected “xxxxx”. What can I do?
Comment by Andrea on 09/24 at 07:18 AM
Andrea - you would need to add a real url to the a href in your html and modify the menuJQuery.js code, lines 98 to 115 to prevent the alert box. I am a designer, not a jQuery expert. There would be others better to advise on the actual code.
Comment by ali white on 09/24 at 04:57 PM
Thanks ali. I’ve added the real url but the problem is that I don’t know how to modify the code…
Anyone can help?
Comment by Andrea on 09/25 at 03:02 AM
first off you are my heroes fantastic work.
but is there a way to not have to have a button open it but have it open from the begining also the breadcrumbs is there a way for it just to display the current menu item.
thanks if you can help.
but again thanks for this.
Comment by jonathan on 09/25 at 08:59 PM
how to download this?
Comment by spbala on 09/26 at 07:21 AM
Hey This is really a cool one !!!!!!!!!!!! Keep It Up
Comment by harry on 09/27 at 08:09 AM
Andrea,
You’ll also need to modify the ‘//click events when categories are accepted values’ section of the menu.jsquery.js script. Replace the ‘alert’ with a ‘page load’ function. There is a good tutorial at http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/. It’s working for me.
Good luck
Comment by ali white on 09/28 at 09:18 PM
Complimenti davvero un gran bel lavoro...anche lo stile è davvero impeccabile!
Comment by ffranz on 10/15 at 09:43 AM
@Will Croft: Exactly, it’d be nice if the scroller was visible only on the sub-menu that required it. Anyone able to do it yet?
Many thanks
Comment by Ebrahim on 10/18 at 05:56 AM
This is ALMOST exactly what I’ve been looking for. However, all it needs is a mode that lets the user select multiple items, categories, etc. and add them to a list of selected items.
Comment by Luke Walker on 10/23 at 02:22 PM
Thanks for the post, Going to use this on my site....
Rocker stuff
Comment by clifford on 10/31 at 03:12 AM
Guys, I’ve solved the scroller issue. Scroller now displays only on the submenu that requires it.
If anyone needs it, let know.
Comment by Ebrahim on 10/31 at 03:48 AM
Ebrahim or anyone else I’d love to get a working copy of this ready to go and play around with please; I’m having a hard time getting it to work. You can email to cary66+ipod at gmail
Thanks!
Comment by Cary Stephan on 11/03 at 12:35 PM
Nice work, i always liked that style. since i’ve seen it on devianart.
Comment by Clone on 11/14 at 05:17 AM
Ebrahim, do u have any running copy of it?
Comment by Forum Lover on 12/01 at 12:47 PM
I am having a difficult time getting this to work on my local machine as well. If someone can upload a little package for download would be very helpful.
I’ve been using firebug and JSView to grab all the necessary code and I still can’t seem to get it working.
Please help. I would love to use this.
Comment by adam on 12/02 at 11:43 PM
UPDATE: we contributed our menu design to the jQuery UI library. It’s currently under construction and slated for release within the next few versions (actual date TBD). You can track it’s progress at the jQuery UI Planning Wiki (http://jqueryui.pbwiki.com/Menu), or better, post feedback or share your own ideas about the jQuery UI planning process: http://jqueryui.pbwiki.com.
Comment by Maggie (Filament) on 12/04 at 05:16 PM
I would appreciate it if you can email me the files for this menu.
Thank You
Comment by vr on 12/20 at 10:45 PM
Can anybody please tell me how to get the menu appear when loaded instead of having the user click the bar at the top to see the menu?
I will appreciate all your help!
Thank you.
Comment by paul on 12/31 at 11:15 AM