BDC DrillDown Menu: Examples

Example 1: Basic DDMenu

This is the most basic possible DDMenu, with no configuration options used. The invocation is done simply like this:

$('#example-1').ddMenu();

This basic menu has the default easing (available without jQuery Easing), the default root title of "Menu", and the default direction for sliding in and out of "east".

Example 2: Split Branches

The invocation for this menu is exactly the same as the last one:

$('#example-2').ddMenu();

However, the structure of the menu is different in that each of the branch labels are links (<a> tags rather than the <span> tags. When a branch label is link (with an href attribute), DDMenu will split the branch — the text portion will be the link in the HTML, and the icon (arrow) portion will still move to the next submenu.

Example 3: Root Menu Title

Each submenu is given a title that matches the text of the branch that brought you to that menu. However, there is no branch that takes you to the root menu. So DDMenu gives it a default of "Menu" (as seen in the first two examples) — but you can change that with the rootTitle option.

$('#example-3').ddMenu({ rootTitle: 'Example 3' });

Example 4: Easing

So long as you include the jQuery Easing plugin in your page, you can change the animation used to slide a menu in and out. Do this by using the easing option. The value of this option can be any of the values listed on the jQuery Easing site.

This example shows the use of the "easeOutBounce" easing, which is arguably the most visually distinctive one available.

$('#example-4').ddMenu({ easing: 'easeOutBounce' });

In addition to easing, the options inEasing and outEasing are available, allowing you to use a different easing when a menu panel slides in versus when it slides out.

Example 5: Animation Duration

Some of the easings seem to move much more quickly than the default one. For this reason, or just to accommodate those who want to change the animation speed, the duration option is available.

$('#example-5').ddMenu({ easing: 'easeOutBounce', duration: 1000 });

The value for duration is given in milliseconds, so the above code will make the full slide in/out animation take one second. As with easing, there are options for inDuration and outDuration which allow separate durations for menus sliding in versus out.

Example 6: Animation Direction

By default, the submenus slide in and out from the east (right), the same is common in other implementations of this type of menu. However, the inDirection and outDirection options can be used to change this behavior separately, as seen here.

$('#example-6').ddMenu({ inDirection: 'north', outDirection: 'south' });

This example will slide in from the north and out to the south. If you wish your menus to slide in from the same direction as they slide out, you can use the shortcut direction, which covers both. The possible values for any of these options are 'north', 'south', 'east' (the default), and 'west'.

Example 7: Initial State

Probably the most popular use for this sort of menu is as a navigation menu. Oftentimes, it's useful to open such a menu to display the link to the page that's currently being displayed. This can be done with the initial option.

$('#example-7').ddMenu({ initial: 'Menu Submenu 3|Submenu Menu 3.1|Submenu Item 3.1.2' });

The pipe character (|) is used as the separator in the path to the initial item. If the menu labels might contain a pipe character, then you can change the separator with the separator option.

$('#example-7').ddMenu({
    initial: 'Menu Submenu 3/Submenu Menu 3.1/Submenu Item 3.1.2',
    separator: '/'
});

This second code snippet has exactly the same effect as the first.

Either way, if there is a CSS class present with the name held in labelInitialClass, that class will be applied to the initial item. This can be used for highlighting the item as shown in this example.

Example 8: Scrolling Speed

This next example is almost exactly the same as the last, except that this time, the scrolling speed is changed. Because there's only one menu panel in these examples that is long enough to scroll, we also set the initial item (like in the last example) to show that panel.

$('#example-7').ddMenu({
    initial: 'Menu Submenu 3|Submenu Menu 3.1|Submenu Item 3.1.2',
    scrollSpeed: 20
});

The scroll speed here is set to 20, twice as high as the default speed of 10. Lower is faster here...in fact, it is the number of milliseconds that it takes the menu to scroll two pixels in either direction. Hence, this menu will take twice as long to scroll as the last one.

Example 9: CSS Classes

You can choose to replace any of the default CSS classes with those of your own. (See the CSS Class Reference page for a full listing of available CSS classes.) You can mix and match; none, some, or all of the class names can be replaced.

$('#example-9').ddMenu({
    labelHoverClass: 'bdc-dd-label-hover-example',
    titleClass: 'bdc-dd-title-example',
    titleRootClass: 'bdc-dd-title-root-example',
    titleRootHoverClass: 'bdc-dd-title-root-example'
});

This code changes the classes for the label hovers and of the title. The classes chosen happen to be a bit more green, and that change is reflected in the example to the right. Notice that two of the options are set to the same class; it often doesn't make sense for the root title to have a different class when it's hovered over, given that there's not often a click action on the root title.

Example 10: Putting It All Together

This example uses the rootTitle, inEasing, outEasing, inDuration, outDuration, direction, initial, and separator properties all at once, along with some of the CSS properties.

$('#example-10').ddMenu({
    rootTitle: 'Example 9',
    inEasing: 'easeOutExpo',
    outEasing: 'easeOutBounce',
    inDuration: 750,
    outDuration: 1000,
    direction: 'west',
    initial: 'Menu Submenu 3/Submenu Menu 3.1',
    separator: '/',
    iconClass: 'bdc-dd-icon-piat',
    iconHoverClass: 'bdc-dd-icon-hover-piat',
    textClass: 'bdc-dd-text-piat',
    textHoverClass: 'bdc-dd-text-hover-piat'
    titleLabelClass: 'bdc-dd-title-label-piat',
    titleIconClass: 'bdc-dd-title-icon-piat'
});

The CSS properties in this case play with the margins, padding, and floats to make the menu items appear reversed. Combining this with animation directions of west, the resulting menu looks like a mirror image of a regular menu (along with some other effects).