BDC DrillDown Menu: Features

Even at this early stage, the DrillDown Menu has a fairly impressive list of features.

Easy to Use

Once you have your list and CSS set up, it takes a single line of JavaScript code to set up a menu. For example, the menu on the left of this page could be set up like this: 

$('#nav > ul').ddMenu();

And the list and CSS is not difficult — the list format is pretty basic and there is an example CSS file (the one used on this site) to get you started.

Highly Configurable

There are many options available for customizing the menu. All of them have sensible defaults, keeping with the ease of use theme. To do this customization, you need only add an options object to the set up call. For instance, here's the actual code used for the menu to the left: 

$('#nav > ul').ddMenu({
    rootTitle: 'jQuery',
    easing: 'easeOutExpo',
    duration: 1000,
    highlighted: 'BDC DrillDown Menu|Features'
});
Standards-Compliant

The menu works by injecting <div> tags and class attributes into your already-existing HTML markup. Everything that is produced this way is valid under XHTML 1.1. While style attributes are used where needed, the goal is to make the CSS responsible for as much as is realistically possible.

Self-Contained

The DDMenu is self-contained and doesn't leak any of its implentation to the page. Thus, as you can see on the Overview and Examples pages, you can include as many menus on a single page as you wish. Each gets its own configuration and keeps its own state.

Small

The minified version of the JavaScript file is under 12k. Gzip compression from your server can halve even that size.

Falls Back Gracefully

Even in this day and age of dynamic pages, plenty of people keep JavaScript disabled in their browsers (I know; I use NoScript myself). While it may not be as pretty, a BDC menu is at its heart just a regular HTML list, and that list is still displayed even if JavaScript is never invoked.

Skinnable/Themable

Nearly every aspect of a DDMenu's presentation is controlled by CSS. Therefore, it's not difficult to write stylesheets for other skins or themes. I may try my hand at a few more than the basic one myself once I have the time.

Additionally, every element of a menu has a CSS class whose name can be configured in the setup. So it's easy to have several different themes on the same page — just assign different names to the CSS options for each of them.

Configurable Initial State

It may be that you don't always want your root menu to be the one displayed when a page is opened up. For instance, you may be using the menu as a nav menu, and you may wish to show in the menu which page is currently open (even if that page is quite deep in the menu hierarchy).

You can do that with the DrillDown Menu. Each menu has a initial configuration option which allows you to choose an item that is highlighted. If you do this, then that item's menu will also be the first one shown, no matter how deep it is in the hierarchy. This is done on the nav menu on this page; the root menu is title 'jQuery', but a submenu is shown and the current page highlighted.

Ability to Split Branch Labels

Depending upon how you set up your list HTML, a branch (an item that has a submenu attached to it) can either be a single link are or two separate ones. In the former case, the link moves to the next menu. In the latter, only the icon (an arrow by default) moves to the next menu; the label acts as a link to another page. Obviously, this behavior can be varied from branch to branch as you see fit.

Scroll Buttons

If a submenu is longer than the menu that contains it, then scroll buttons appear to move the submenu up and down. Like everything else in the menu, these scroll buttons are completely configurable via CSS.

Configurable Easing (optional)

The DDMenu integrates with the jQuery Easing plugin to provide configurable easing (i.e., different animations for the menus sliding in and out). This is optional, however; the default easing does not use jQuery Easing and doesn't require that the library be included.

The nav menu on the top left of this page uses the "easeOutExpo" easing, which starts quickly and slows down exponentially. Because different easings look better at different speeds, the amount of time that it takes to finish an animation is also configurable.

Configurable Animation Direction

The iPod that popularized this kind of menu always slides in from and out to the right. BDC DrillDown menu allows you to slide a submenu in from and out to any of the four cardinal directions. You need not slide the menu in and out from the same direction; one of the menus on the Overview page has the submenus slide in from the top and out to the bottom.

Works in All Major Browsers

BDC DrillDown Menu has been developed in and tested on Firefox 2 and 3, Internet Explorer 6 and 7, Opera 9.25, and Safari 3.1 (note: there are well-known styling issues in IE 6 that render the default CSS file a bit ugly, but this can be compensated for by tweaking the styles).

BSD Licensed and Open Source

The DDMenu is licensed under the Modified BSD License. This allows total freedon of use, so long as you retain the copyright notice and disclaimer of warranty. There is no restriction on use — you can use it in commercial or non-commercial products and choose whether to distribute the source code (though let's face it, you can't stop source-code distribution of JS files anyway). This license is GPL-compatible.

The license appears in full in the un-minified, un-packed version of the library. It also applies to the other two versions, though the text is omitted in favor of saving space.

Even with all of this, there are still some things that are missing. A partial list includes the following:

If you find other missing or poorly implemented features, please email me and let me know.