BDC DrillDown Menu CSS Class Reference
Without CSS styling, DrillDown Menu is ugly and pretty close to useless. With the default styling, it's quite functional and doesn't look too bad. With custom styling, you can make your DDMenus look virtually any way you want them to.
CSS styling is undergoing constant development, particularly with versatility in mind. If you can't make it look or feel the way you want it to, then please email me with your suggestions.
There are two philosophies of CSS design in a project like this, each with its advantages and disadvantages.
- Giving each element a unique class. This gives better and easier control over the look of an element, but it comes at the cost of oftentimes having to repeat CSS styles among different classes.
- Adding classes to elements at certain times (such as when the mouse hovers over an element), meaning that the element could have more than one class at once. This allows for better reuse of styles between classes, but it's tricky to get the styles just right (especially when the classes appear in different style sheets).
Though I started with the second option, I moved to the first. CSS styling is the most time-consuming and difficult part of using DDMenu, and it's appealing to make it as easy as possible even if it's at the expense of a little copy-and-paste. In truth, it was very, very difficult to get Examples 8 and 9 on the Examples page right under the second option. When I changed to the first, it took seconds to get it right.
So as you're going through this reference, keep in mind that every element has exactly one of these classes applied
to it at a given time. For instance, when an icon is hovered over, it changes from having the iconClass
class to having the iconHoverClass class. It does not have the iconHoverClass and
the iconClass classes at the same time.
This table is an extension to the Options Reference table. Each of the options
listed here can be modified as part of the options object passed to the ddMenu function the same as
any other option. The visualizations on the right are working menus that have the affected element outlined in red.
To better see elements that are in transition, I've also slowed down the animations with
$.fn.ddMenu.defaults.duration = 1500;
This is described on the Options Reference page.
| Option | Description | Default Value | Visualization |
|---|---|---|---|
| menuClass |
The class for the entire menu. This is essentially the viewport through which all of the menu panels are
seen. For this reason, it's likely that you will want to include overflow: hidden in this class
so that the unused menu panels aren't seen off to the side.
|
'bdc‑dd‑menu' | |
| menuPanelClass |
The class for each menu panel (the parts that slide in and out). Each level in the hierarchy is set inside
its own menu panel. Note that it's possible to have a different height or width
for this as for the menuClass element, but this is likely to do bad things, so it's not a good
idea.
|
'bdc‑dd‑menu‑panel' | |
| scrollPaneClass |
The scroll pane is a normally-invisible block whose sole purpose is to provide an anchor point for scrolling
a submenu. Generally, this class should only contain an overflow: hidden and, for the purposes
of better controlling scroll button placement, a position: relative. Using the latter allows
you to use absolute positioning on the scroll buttons and have that absolute positioning be relative to this
block.
|
'bdc‑dd‑scroll‑pane' |
|
| scrollUpClass |
When an "up" scroll button appears, this is the class that controls its presentation. More specifically, it
controls the presentation when not moused over. The classes scrollUpHoverClass and
scrollUpClickedClass control it in other situations. Note that even though the example at the
right is initially placed on a menu that must scroll, the "scroll up" button doesn't appear until the menu
has been scrolled down at least one pixel.
|
'bdc‑dd‑scroll‑up' |
|
| scrollUpHoverClass |
This class controls the presentation of the "up" scroll button when the mouse hovers over it (but not when
it is clicked). As with scrollUpClass above, this up button will not appear until the menu in
the example at the right has been scrolled down a bit.
|
'bdc‑dd‑scroll‑up‑hover' |
|
| scrollUpClickClass | This class controls the presentation of the "up" scroll button when it's clicked. | 'bdc‑dd‑scroll‑up‑click' |
|
| scrollDownClass |
When an "down" scroll button appears, this is the class that controls its presentation. More specifically,
it controls the presentation when not moused over. The classes scrollDownHoverClass and
scrollDownClickedClass control it in other situations.
|
'bdc‑dd‑scroll‑down' |
|
| scrollDownHoverClass | This class controls the presentation of the "down" scroll button when the mouse hovers over it (but not when it is clicked). | 'bdc‑dd‑scroll‑down‑hover' |
|
| scrollDownClickClass | This class controls the presentation of the "down" scroll button when it's clicked. | 'bdc‑dd‑scroll‑down‑click' |
|
| subMenuClass |
This is the class applied to each list element (either ul or ol) itself. There
isn't generally much that needs to be done with this class; it's simply provided for completeness. In fact,
as you can see from the example to the right (on non-root menu panels), setting a border here actually
causes a gap to appear between the label text and icon. There should be little need to use this class for
much.
|
'bdc‑dd‑sub‑menu' |
|
| titleClass |
This class controls the look of the title area at the top of each menu panel. It's applied to a container
element for the title text and (if present) the title icon.
Notice that this class has no effect on the root menu panel title. That has its own special class that is discussed under titleRootClass.
|
'bdc‑dd‑title' |
|
| titleHoverClass |
This class replaces titleClass on the title element when the mouse hovers over it. It should be
a separate, self-contained class, since it doesn't add to but instead replaces titleClass.
Once again, this does not affect the title on the root menu panel. That panel has no mouse hover class. |
'bdc‑dd‑title‑hover' |
|
| titleRootClass |
Here is the equivalent to titleClass, except that this class only affects the root menu panel.
The reason for the separate class is that the root menu panel's title has no link action, whereas all of the
other menu panels' titles drill up when clicked. Its primary purpose is to be able to exclude
cursor: pointer while including it in titleClass.
|
'bdc‑dd‑title‑root' |
|
| titleRootHoverClass |
This class is used when the root menu panel title is hovered over. In the default style sheet, this is
exactly the same as the titleRootClass class — it's likely that most of the time, there
will be no need for different styles between the two. You could even set this option to refer to exactly
the same style as titleRootClass.
|
'bdc‑dd‑title‑root‑hover' |
|
| titleLabelClass |
This class controls the appearance of the label portion of a menu panel's title. This is generally the
left-most part of a title, and it is a part of both root menu panel and all of the child menu panels. In
order to accomodate the varying width of the label (wider when an icon is present, narrower when it isn't),
DDMenu sets the width property automatically and will ignore any width present
in this class.
There is no separate mouse hover class for this element. Instead, use a combination of the titleHoverClass and titleLabelClass (by default, .bdc-dd-title-hover
.bdc-dd-title-label).
|
'bdc‑dd‑title‑label' |
|
| titleIconClass |
The icon that appears on the menu panel title is controlled by this class. Here is where you can add a
graphic (the white up-arrow in the default style sheet), control the position (floated right in the default
style sheet, but you can as easily float it left if you set the titleLabelClass margin
correctly). There is no icon on the root menu panel title, so this setting does not affect that title.
Any height set in this class will be ignored, as DDMenu automatically sets the height to match
the rest of the title. This allows the icon to cover the entire height of the menu even if the title is
long enough to wrap the text onto two lines (and therefore increase the title's height).
|
'bdc‑dd‑title‑icon' |
|
| itemClass |
DDMenu applies this class to the <li> items from your original list. Unlike
subMenuClass, there is some important stuff to be done here — this is where you can
remove the list bullet icons and set the left margin properly.
Still, for most DDMenu-related things, you should set your styles in labelClass instead of
this one.
|
'bdc‑dd‑item' |
|
| labelClass | The appearance of the label (a container for both the text and the icon on a menu item) is set by this class. | 'bdc‑dd‑label' |
|
| labelHoverClass |
This class controls the appearance of the entire label (text + icon) when it's hovered over. Note that this
class is not used with split branches; in that case, the separate textHoverClass and
iconHoverClass are used instead. If the label is not a split branch, then this option is used
instead.
|
'bdc‑dd‑label‑hover' |
|
| labelInitialClass |
This class replaces labelClass for any item that is pointed to by the initial
option path. This allows an initial item to be highlighted, for instance. If you don't wish to use the
highlighting but wish to use initial to call up the proper menu panel on setup, then set this
class to be the same as labelClass.
|
'bdc‑dd‑label‑initial' |
|
| labelInitialHoverClass |
This is the class used on an initial label when it's hovered over. Note that unlike
labelHoverClass, this class is used even with split branches. This is because there is no class
specific to the text and icon of an initial label. This way, you can set the separate parts of a split
branch initial label by combining hover classes — .bdc-dd-label-initial-hover
.bdc-dd-text-hover, for instance.
|
'bdc‑dd‑label‑initial‑hover' |
|
| textClass |
This is the class that affects the actual text part of the label individually from the rest of the label. As
with titleLabelClass, the width property will be ignored by DDMenu if you set it
here; instead, it will be set to the proper value based on whether or not the item has an icon.
|
'bdc‑dd‑text' |
|
| textHoverClass |
This class replaces textClass when the mouse hovers over the label. However, this only
happens when the label is part of a split branch. If the item is not a split branch, then this class will
never be used — the entire label will have a labelHoverClass placed on it instead. For
this reason, the visualization on the right has split branches.
As with textClass, any width properties are ignored and the label is set to the
width necessary to fill the space before the icon.
|
'bdc‑dd‑text‑hover' | |
| iconClass |
This is the class that affects the icon part of the label individually from the rest of the label. As
with titleIconClass, the height property will be ignored by DDMenu if you set it
here; instead, it will be set to the proper value based on the height of the entire menu item.
This is the proper place to set a background image (such as the white right arrow in the default style sheet). You can also put the icon on the left by using float: left and setting the
textClass left margin correctly (see Example 10 on the Examples
page for an example).
|
'bdc‑dd‑icon' |
|
| iconHoverClass |
This class replaces iconClass when the mouse hovers over the icon, but only when the icon is
part of a split branch. If the item is not split, then this class will never be used — the entire
label will have a labelHoverClass placed on it instead. For this reason, the visualization on
the right has split branches.
As with iconClass, any height properties will be ignored and the height will be
set to match the height of the containing label.
|
'bdc‑dd‑icon‑hover' |