BDC DrillDown Menu, an iPod-style menu

The BDC DrillDown Menu is a compact, hierarchical drilldown menu implemented as a jQuery plugin. A drilldown menu takes up constant space like an accordian menu but offers the deep hierarchy of a flyout menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a flyout menu, where more mouse movement and accuracy is required. DDMenu turns a standard HTML list into a dynamic JavaScript drilldown menu that maintains a small profile no matter how deep the hierarchy it controls. This is quite similar (though with more features) to the menu used in the iPod.

This component was written because there really isn't anything like it out there (and I had a need for it). Infragistics has a similar component, but that library is ASP.NET-specific. There is a jQuery plugin with this sort out there (from the Filament Group), but to do any configuration, it has to essentially be reprogrammed. The BDC DrillDown Menu is meant from the start to be full-featured, highly configurable, and easy to use.

BDC DrillDown Menu is currently alpha-quality software. The API can and probably will change somewhat as features are added or improved. There are bugs present which will be worked out as new versions are released. Please help by emailing me if you find bugs, would like to see a new feature, or just have comments.

Using the DDMenu is as easy as adding a single line of JavaScript to your current HTML page. CSS styles are required if you want it to look good, but I do provide a simple, basic stylesheet to get you started. There are numerous configuration options, but all have sensible defaults and you need only change what doesn't suit you.

Here are a pair of examples, each with the same structure but some different behavior:

The leftmost example exhibits all of the default behavior — no options are specified when the menu is created. Notice that clicking any item with an arrow to the right (indicating that it has a submenu) does not pop up an alert telling you which item has been clicked — it simply brings on the next submenu.

The rightmost example has several behaviors defined. First of all, all of its items with arrows are split into two portions — clicking the label actuates a link (which generates an alert) and clicking the arrow icon brings out the next submenu. This can be done on a per-item basis because it depends on what markup is present in the list. Every other difference is implemented as an option: the root menu title, the fact that submenus bounce in and out from different directions rather than merely sliding, the time the transition takes, etc. Also, one item is marked as highlighted, and its submenu is automatically the first displayed (you have to drill up a couple of times to see that custom root menu title). You can use this to have a navigation menu indicate which page the user is on even if it's deeper in the hierarchy, for instance. The starting menu panel here also is larger than the space provided for the menu, so it shows the scroll buttons that automatically display.

If you look at the source from the page, you will also see that the left-hand menu is built on an underlying list, while the right-hand example is built on a structure of <div>s. So long as the structure is what DDMenu expects, you can use any elements you desire.

Here are some of the features of the DDMenu (see the Features page for more detail):

BDC DrillDown Menu requires jQuery 1.2, along with the jQuery Dimensions 1.2 plugin. (If you use version 1.2.6 of jQuery or later, Dimensions is included and need not be added separately.) The jQuery Easing 1.3 plugin is optional.