Examples

Examples - Other Features
This page shows the usage of other useful WebDDM features that are great, but
aren't complex/great enough to have a page dedicated to them.
Examples - Open/close delay
This feature may not be for everybody, but it can be very useful at times.You can assign open/close delays for menus like this:
1:{
// define menu open delay, in milliseconds
'openDelay':500,
// define menu close delay, in milliseconds
'closeDelay':1000,
// other item properties...
}
An example of this can be seen with the "More Info" submenu.
Setting actions
You can specify code that will be executed when certain events occur. Possible
events:
- onmouseover - Code to be executed when the mouse moves over the item.
- onmouseout - Code to be executed when the mouse moves off the item.
- onclick/onmouseup/onmousedown - Code to be executed when an item is clicked on.
- onmousemove - Code to be executed when the mouse is moved over the item.
Example:
1:{
// Code for the item....
// Action handlers for the item....
'actions':{
'onmouseover':'window.status="example";',
'onmouseout':'window.status=window.defaultStatus;'
}
}
Check out the status bar when your mouse is over the "More Info" submenu.
Setting the z-index
If you want to change the default z-index of your menu/menu items, it's
easy to configure. To set the z-index of the base menu:
var menu = {
// Initialize menu...
// Set z-index
'zIndex':1000,
// End menu...
};
In the past you could set individual zIndexes for items, but this feature was
pointless and often led to confusion, so it has been removed.If you set the zIndex, the changes will apply to all menus and tooltips.
Always preload your images!
One way to make menus more pleasing it to preload ALL images used in your
menu, right away. It's very simple to do this:
WebDDM_preloadImages('menus/mainmenu/arrowdown.gif',
'menus/mainmenu/arrowleft.gif', 'path/to/another.image', 'etc');
View Source
View CSS file - View JavaScript file.
Examples
Examples: Last - Next