jQuery iPod-style Drilldown Menu

Posted by Scott and Maggie on 05/14/2008

Topics:

Note: We've created a new article with some major improvements to this plugin. To read the article and download the script, visit jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready.

1/16/09 Update: we contributed this menu plugin to the jQuery UI library. It’s currently being refactored and slated for upcoming release. You can track its progress at the jQuery UI Planning Wiki (Menu planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joining the planning wiki.

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.

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:

Demo page

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

Demo page

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.

Thanks for the helpful feedback!

We're no longer taking comments on this post because we've handed off development of this widget to the jQuery UI development team. The menu is currently being refactored and is slated for an upcoming jQuery UI release. We encourage you to track its progress and continue contributing your ideas at the jQuery UI Development & Planning Wiki.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

Great hierarchical menu, I haven’t seen a website use this type of menu anywhere.  Nice work.

Comment by Marc Grabanski on 05/16  at  03:49 AM

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  11: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  11: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  04:48 PM

Nice, thats much better already!

Comment by Jörn Zaefferer on 05/16  at  05:13 PM

Bravo!

Comment by Federico on 05/17  at  01:50 PM

That is pretty cool, nice jobs.

Comment by Bob on 05/17  at  06:13 PM

deviantart uses a similar menu

Comment by argonauta on 05/17  at  08: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  08:02 PM

nice plugin, i am already thinking where i can use this kind of menu.

Comment by thecancerus on 05/17  at  08:38 PM

Great job. Shouldn’t the menu remember the last position when clicked again?

Comment by florin on 05/17  at  10: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/18  at  01:08 AM

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  12:03 PM

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  01:35 PM

the irony: does not work on iPhone…

Comment by regis on 05/18  at  05:12 PM

font on the category looks small. I dont usual to look that font.. thanx

Comment by baobaz on 05/20  at  02:27 AM

@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  11: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  11:21 PM

Wow this jQuery Effect really useful for me, thanks

Comment by IndoDX on 06/05  at  01:40 AM

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/05  at  04:54 AM

so we don’t get download?

Comment by Dejan Cancarevic on 06/19  at  10:00 PM

You should see the browse menu of DeviantArt, that’s just sweat!

Comment by kelley van Evert on 07/06  at  05:53 PM

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/08  at  01:32 AM

Holy macaroni, this is really damn awesome!!!!!!

Comment by Ardi on 07/08  at  12:00 PM

Nice work ... innovative… out of box thinking ... keep on improving it.

Comment by samdhal on 07/16  at  09: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  10: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  11: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  11: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  05:17 PM

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  06:58 PM

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  06:28 PM

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  07:58 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  04:42 PM

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  07: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  09: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  05:25 PM

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  05:11 PM

nice

Comment by aqlx86 on 09/15  at  11:08 AM

Nice menu

Comment by Minh Trung on 09/16  at  11: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  08: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/23  at  12:43 AM

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  02:18 PM

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  11: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  10: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/26  at  03:59 AM

how to download this?

Comment by spbala on 09/26  at  02:21 PM

Hey This is really a cool one !!!!!!!!!!!! Keep It Up

Comment by harry on 09/27  at  03:09 PM

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/29  at  04:18 AM

Complimenti davvero un gran bel lavoro...anche lo stile è davvero impeccabile!

Comment by ffranz on 10/15  at  04:43 PM

@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  12:56 PM

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  09:22 PM

Thanks for the post, Going to use this on my site....

Rocker stuff

Comment by clifford on 10/31  at  10: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  10: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  08:35 PM

Nice work, i always liked that style. since i’ve seen it on devianart.

Comment by Clone on 11/14  at  01:17 PM

Ebrahim, do u have any running copy of it?

Comment by Forum Lover on 12/01  at  08: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/03  at  07:43 AM

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/05  at  01:16 AM

I would appreciate it if you can email me the files for this menu.
Thank You

Comment by vr on 12/21  at  06:45 AM

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  07:15 PM

very nice , i like it. i am using this menu navigation in my next website.

thanks
jon
http://www.csshook.com

Comment by jon on 01/16  at  09:57 AM

very nice!

Any plan or idea how to implement keeping state?

To add cookies to keep state as many others?

I usually prefere to programmically (php or so) add a class “current” to the actually selected li-element in the markup. Than during initialisation of the menu I search with jquery for li with class “current” and open the correspondig parent ul.

And the moment I can’t see how to implement this?

Comment by daniel on 01/17  at  10:05 PM

hello, great script, very useful

but, i have a question, how to make the ‘.menu ul’ to be visible all the time?

thanks

Comment by Sergiu on 01/18  at  01:02 PM

Those who are saying this is like Deviant Art are misunderstanding what’s going on here. Deviant Art has a normal drill down menu, where each click takes you to a new page with a more specific menu. This plugin would never change its page, allowing you to drill down to the content while staying on the home page.

My only problem with this is that I can’t stand iPod and other mp3 player menus. I can never figure out which button opens the content and which button drills down to the new category. On the sansa, the play button doesn’t actually load the song you’ve chosen if you’re in the menu mode.

Comment by vanishdesign on 01/19  at  12:40 AM

Ebrahim or anyone else: I´d love to get a copy of a working solution for this menu. I´ve been playing around with the MaxHeight issue with no results so far… Please, could you email to rksanova at gmail ?
Thanks!

Comment by Robert García on 01/26  at  03:07 PM

I really need the files for this as well, if anyone has a working version would you please email to cary66 at gmail? Thanks!!

Comment by Cary on 02/03  at  07:11 PM

This is a work of art.
Thank you and keep up the good work!

I’ve noticed that in IE7 the scrollbar is not working.
I’ve fixed it.
If you need the fix, contact me at rsw_001 at yahoo dot com.

Again Thank you very much. This is great!

Comment by Robert Muster on 02/04  at  02:03 PM

Sweet. Will keep this in mind for my next projects.

Comment by Andrew Henze on 02/08  at  06:15 AM

Nice work, but how can i go to link associated to link?

i mean, clicking on any option, go to url.

Thanks.

Comment by Kervi on 02/20  at  01:48 PM

Nice work, but how can i go to url associated to link?

i mean, clicking on any option, go to url.

Thanks.

Comment by Kervi on 02/20  at  01:50 PM

Nice work, i always liked that style. since i’ve seen it on devianart.

Comment by ceiling roses on 04/01  at  10:37 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.).

Comment by simple websites on 04/06  at  04:27 PM

To improve this component i propose:
- Use the UI properly; see http://jqueryui.com/docs/Developer_Guide and http://youngisrael-stl.org/wordpress/understanding-jquery-ui-widgets-a-tutorial/
- keep your stuff (functions and vars) in your own scope and don’t set the prototype of built in classes; avoid polluting global name space
- keep functions in one level (don’t nest functions for better performance and readability)
- don’t trigger mouse events when a key gets pressed; fire your own events instead
- don’t bind every element; bind to a common root node and use event.target
- for better performance cache html fragments: var divInStaticScope = $(’<div>hi</div>’); and use divInStaticScope.clone(); to create new html

Comment by grumbler on 04/23  at  03:10 PM

Can it use on blogspot?

Comment by Zen on 04/26  at  07:03 AM

@grumbler:  Thanks for the tips.  We designed this as a working prototype, though (see our latest version: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/), so there are probably many ways in which the script can be optimized.  :)

As noted above, we contributed this design to the jQuery UI team for inclusion in their library as the de facto menu widget.  If you’d like to contribute to that effort, check out their development and planning wiki: http://wiki.jqueryui.com/Menu.

Comment by Maggie (Filament) on 04/27  at  06:46 PM

@Zen:  Do you have permission to use this on your blogspot blog?  Absolutely, we just ask that you:

1. use the latest version of the menu plugin, posted on April 2, 2009:  http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

2. abide by our open source license (download and view the script’s source for more details)

Good luck!

Comment by Maggie (Filament) on 04/27  at  06:48 PM

I love it!  Thank you so much!

How would I enable the menu so that it is activated on mouseover or hover instead of mousedown or clicking?

Thank you!

Comment by James on 05/01  at  08:34 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 sklepy internetowe on 05/02  at  01:49 PM

Is there some ideas how to user it in real life?

Comment by Paradise on 06/10  at  11:50 AM

WOW that is very nice, Thanks :) I made it into a pull out page that is now about 4 times faster than my old method. For peeps that wanna use it in real life lol go download firefox then save page as: on any of the wonderful demonstrations provided. This tiny bit of code saved me hours .. And looks spot on.
Very Nice
Regards “”

Comment by Talon on 06/27  at  01:53 PM

I dont get it. How do i get it to load external urls? If i put a link in the categories in the menu date it stille says “You choose ....” ?  So what do i do wrong? Please help :(

Comment by Mark on 08/13  at  01:40 AM

Figured it out. I had to replace the “alert..............” lines in the js file with “location.href = $(item).attr(’href’); “

works like a charm now :P

Comment by Mark on 08/13  at  01:51 AM

your site: http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/ cannot be opened by Internet Explorer 7; just impossible.
Everything works smoothly with firefox or IE8. Why ?
Can you specifiy the setting for IE7 to make your tools work for that browser as well ???

Thanks for your response.

Comment by Thomas Fritschi on 08/17  at  01:44 PM

Very nice script, Is there a way that the parent link will be enabled and show the child navigation when you hover on the parent link?

Comment by ian on 08/24  at  05:00 AM

how can i show the drop external menu with a mouseover? actually the script only works by clicking...thanks.

Comment by lalo on 09/10  at  04:44 PM

Para quem quer que o link funcione, dentro do fonte fg.menu.js, descomente a linha “location.href = $(item).attr(’href’);”

Comment by Ricardo Voigt on 09/16  at  07:29 PM

Hi all ..
I get an error in IE ...

Webpage error details

Message: Invalid argument.
Line: 1061
Char: 4
Code: 0
URI: http://webpage/js/jquery-1.3.2.js

This is my code:

// jQuery UI BUTTONS
$(’.fg-button’).hover(
function(){ $(this).removeClass(’ui-state-default’).addClass(’ui-state-focus’); },
function(){ $(this).removeClass(’ui-state-focus’).addClass(’ui-state-default’); }
);

// MENUS
$(’#one’).menu({
content: $(’#one’).next().html(),
backLink: true,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Inapoi’
//crumbDefaultText: ‘ ‘
});

$(’#two’).menu({
content: $(’#two’).next().html(),
backLink: false,
directionV: ‘down’,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Toate’
});

$(’#three’).menu({
content: $(’#three’).next().html(),
backLink: false,
directionV: ‘down’,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Toate’
});

$(’#four’).menu({
content: $(’#four’).next().html(),
backLink: false,
directionV: ‘down’,
crumbDefaultText: ‘Alege optiunea’,
topLinkText: ‘Toate’
});

and the jquery line with the error is:

1060 if ( set )
1061 elem[ name ] = value;
1062
1063 return elem[ name ];

Any idea ?

Thanks

Comment by Cristian on 10/13  at  02:16 PM

Hi everyone—We just wanted to thank you all for the helpful feedback, and let you know that we’re no longer taking comments on this post because we’ve handed off development of this widget to the jQuery UI development team.  The menu is currently being refactored and is slated for an upcoming jQuery UI release.  We encourage you to track its progress and continue contributing your ideas at the jQuery UI Development & Planning Wiki: http://wiki.jqueryui.com/Menu.

Comment by Maggie (Filament) on 10/13  at  04:57 PM

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site