Question

I would like to implement an accordian-style menu on my site. There are some requirements:

• It must support multiple levels of depth (at least 3).
• It must work like an accordian.
• It must provide content about where the user is.

Additionally I would love if it supported ThemeRoller.

I was looking around and came across some menus that are very similar to what I’m looking for:

• http://www.designchemical.com/lab/jquery-vertical-accordion-menu-plugin/examples/, however, it still shows all the other items in the parent menu after selecting an item. Also, has no ThemeRoller support.
• http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/, stores history as a breadcrumb instead of menu items.
• http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/getting-started/, doesn’t support jQuery 1.8.2 and displays the entire parent contaner’s menu items after an item with children has been expanded. Also, has no ThemeRoller support.

What I’m really looking for is pretty much exactly what is over at the MSDN library.
The MSDN menu is accordian-style and it hides everything not in the current level/container. It also keeps the parent item as a ‘menu item’ instead of as a breadcrumb.

If anyone has suggestions for such a menu I’d be happy to get them. Otherwise, I’d like to get the DesignChemical Drill-Down menu working with jQuery 1.8.2. The error I’m getting is rather ambiguous (from the demo page that comes with the menu):

Syntax error, unrecognized expression: [object Object][rel="7"]

The error is coming from the jQuery library itself, line 4679.

Any ideas how I can go about fixing this?

I’ve found that the problem only exists with jQuery v1.8.0 and later, it still works with v1.7.2.

Answer 1

There is a bug in the jquery.dcdrilldown.1.2.js file (and the min version too). Simple go to line 103 and replace

var maxUl = $(objUl+'[rel="'+maxItems+'"]');

with

var maxUl = objUl.find('[rel='+maxItems+']');

and the menu will now work with jQuery v1.8.0 and later.

UPDATE:

I was doing more testing and found that if the root menu is the one with the greatest number of items, even the above fix won’t help; a few other changes are still needed.

First, the above line needs to be:

var maxUl = objUl.parent().find('[rel=' + maxItems + ']');

Second, about line 184 the line

return maxIndex;

needs to be replaced with this code:

if ($(element).find('li').length > maxIndex) {
//the longest 'submenu' could be the root menu
    return 1
} else {
    return maxIndex;
}