BDC DrillDown Menu Options
The default settings may be just what you need, but chances are that you'll eventually be looking for a way to
customize your menus somewhat. You can do that by passing an options object to the ddMenu function.
Below, you will find all of the options available for your manipulation. For more detail on the CSS class options, see the CSS Class Reference page.
A Note on Defaults
The defaults for DDMenu would more properly be called "default defaults". These defaults are available to you in
the object $.fn.ddMenu.defaults. Since this object is accessible, you can modify it to your heart's
content — and then every menu created afterwards will use the modified object for its default values.
For instance, if you had ten menus on a page and decided that all of them should have menu panels drop in from the top and out through the bottom, you could add these two lines of code before you created any of the menus:
$.fn.ddMenu.defaults.inDirection = 'north'; $.fn.ddMenu.defaults.outDirection = 'south';
Any menu that you create after those lines execute would have the new default in and out directions.
| Option | Description | Default Value |
|---|---|---|
| rootTitle | This is the text that is displayed on the root menu panel. Each other menu panel is titled according to the text of the branch item that was used to activate it. Since there is no such branch to activate the top-level, root panel, this property is used instead. | 'Menu' |
| easing inEasing outEasing |
These three options let you change the algorithm used to make the menu panels move in and out. The values of
inEasing (for animating a panel coming in on drill-down) and outEasing (for
animating a panel going out on drill-up) take precedence, but if one or both are not set, then the value of
easing covers for whichever direction is not specified.
The default value of easing is usable with basic jQuery, but if you wish to use any other
easings, you will need to include the jQuery Easing
plugin in your page.
Any valid easing value can go here (for the values available from the Easing plugin, see its Web site). DDMenu doesn't care if you're using the Easing compatibility plugin, or an older version of the plugin that uses different names — as long as your version of Easing understands the parameter, then it will work. |
'swing' null null |
| duration inDuration outDuration |
These three control the time that it takes for an animation to run from start to finish. The values of
inDuration (for animating a pancel coming in on drill-down) and outDuration (for
animating a panel going out on drill-up) take precendence, but if one or both are not set, then
duration covers the duration for whichever is not specified.
The time is given in milliseconds (so set it to 1000 for one second). It's useful to extend this for some of the more complex easings such as easeOutBounce. Shorter durations are more useful for
simple easings (such as the default).
|
500 null null |
| direction inDirection outDirection |
These three options determine which direction an inward animation starts from (in relation to the menu
itself) and which direction an outward animation ends at. The values of inDirection and
outDirection take precedence, but if one or both are not set, then direction
covers the direction for whichever is not specified.
Cardinal directions are used here, so instead of specifying left, right, up, or down, you should use north, south, east, or west.
|
'east' null null |
| scrollSpeed |
This property controls the speed that a menu panel scrolls when a scroll button is clicked upon. Like
duration, a lower number means faster. However, unlike duration, this number is
not the amount of time that it takes to complete the scrolling animation — that would cause menu
panels of different lengths to scroll at different speeds — it's the amount of time (in milliseconds)
that it takes for a panel to scroll two pixels.
|
10 |
| initial |
This is a path name containing the titles of all of the menu panels (not counting the root panel) that one
must traverse in order to get to the specified menu item. If this item exists in the menu, then it becomes
the initial menu item. The initial item is highlighted on this page, and when the page is created, the
DDMenu automatically navigates through the menu so that the user can see that initial item.
The path is formed by using the text for each label that you'd have to drill down through to get to the target item, verbatim, separated by the 'separator' character (see below). Thus, for the menu at the right, the initial value is BDC DrillDown Menu|Documentation|Options Reference. Be
careful — spaces in the path count.
|
null |
| separator | If one of the menu panel titles contains the default separator character, then you cannot build the path with that character in it. That's the purpose of this property — you can make the separator something that you are certain will not appear in the menu. | '|' |
|
menuClass menuPanelClass scrollPaneClass scrollUpClass scrollUpHoverClass scrollUpClickClass scrollDownClass scrollDownHoverClass scrollDownClickClass subMenuClass titleClass titleHoverClass titleRootClass titleRootHoverClass titleLabelClass titleIconClass itemClass labelClass labelHoverClass labelInitialClass labelInitialHoverClass textClass textHoverClass iconClass iconHoverClass |
These CSS properties control the way the DDMenu looks. All of them replace the automatically-generated
class name assigned to an element with something new of your choice. It is through this mechanism that the
look of the menu can be seriously improved.
See the CSS Class Reference for more information about each of these properties. |