Examples

Examples - Menu Behavior
This page shows an example of menu behavior.There are many different possible combinations of menu behavior:
Rollover to open, rollout to close - The item's submenu opens when you move the mouse over the item, and closes when you move the mouse off the item and the submenu.
Rollover to open, click to close - The item's submenu opens when you move the mouse over the item, and closes when you click on the item or on the page.
Click to open, rollout to close - The item's submenu opens when you click on the item, and closes when you move the mouse off the item and the submenu.
Click to open, click to close - The item's submenu opens when you click on the item, and closes when you click on the item or on the page.
Notice: Did you see that the wording of that first sentence has changed since earlier versions of WebDDM? Originally, it said "only four combinations are possible." Well, that's just not true! Since version 3.0, there are new ways to expand/contract menus, and in the future there will be more!
Setting behavior
To set the behavior, use this format:
// Beginning of menu
// ...
// Item
1:{
// Item attributes
// ...
// Menu behavior
'expand_menu': 'rollover|click', // Defaults to "rollover"
'contract_menu': 'rollout|click', // Defaults to "rollout"
// Submenu
'items':{
// ...
}
}
// The rest of the menu
// ...
New in WebDDM 3.0.0: Multiple types
As of WebDDM 3.0.0, you can use multiple "expand_menu" or "contract_menu"
types; for example, you can make a menu open when the user either clicks
or rolls over the item:
"expand_menu":"click|rollover"You can do this with "contract_menu" as well.
New in WebDDM 3.0.0: "expand_menu"="auto"
As of WebDDM 3.0.0, the "auto" value is valid for the "expand_menu"
attribute. This automatically opens an item's submenu. Also,
the item's submenu becomes visible when the item itself becomes visible.This feature is not as commonly used as others, but it can be very powerful! Use your imagination. You can see a simple example on the floating menu page.
New in WebDDM 3.2.0: "contract_menu"="none"
As of WebDDM 3.2.0, the "none" value is valid for the "contract_menu"
attribute. This simply makes sure that a submenu is never hidden.
View Source
View CSS file - View JavaScript file.
Examples
Examples: Last - Next