Expand and Collapse Animation Effects

ComponentOne Menu for ASP.NET AJAX: Menu Behavior > Animation > Expand and Collapse Animation Effects

You can change how drop-down menus or submenu items expand or collapse by using one of the 25 built-in animation effects. These animation effects are available through the CollapseAnimation and ExpandAnimation properties. Expand and collapse animation effects are special visual effects that occur while the menu items expand or collapse. For each expand or collapse effect you can specify how long the animation lasts by specifying an integer value for the ExpandDuration and CollapseDuration properties. The duration is measure in milliseconds. By default, the menu items expand and collapse without an animation effect.

Different animation effects can be applied to each drop-down menu, but it is recommended to use only two animation effects: one for the collapsed menu items and one for the expanded menu items. Typically the animations that scroll in, fade in, fold in, open, or drop in are used on expanding menu items and the animations that scroll out, fade out, fold out, close, or drop out, are used on collapsing menu items. To disable an animation effect for the collapsed menu items or expanded menu items, set the CollapseAnimation or ExpandAnimation property to "None".

The following table lists and defines each animation effect:

Animation Name	Animation Description
None(Default)	Disables animation behavior for the expanding or collapsing menu items.
FadeIn	Performs a fade in from the current opacity to the maximum opacity.
FadeOut	Performs a fade out from the current opacity to the maximum opacity.
ScrollInFromTop	Scrolls down from the top to bottom.
ScrollInFromRight	Scrolls in from the right end to the left end.
ScrollInFromBottom	Scrolls in from bottom to top.
ScrollInFromLeft	Scrolls in from the left end of the menu item to the right end of the menu item.
ScrollOutToTop	Scrolls out of view from the bottom to the top of the menu.
ScrollOutToRight	Scrolls out of view from left to right.
ScrollOutToBottom	Its scrolls out of view from the top down to the bottom.
ScrollOutToLeft	Scrolls from the right side toward the left side of the menu.
Fold	Folds the menu.
UnFold	Unfolds the menu.
OpenVertically	Opens the menu vertically from the center of the menu.
CloseVertically	Closes the menu vertically from the center of the menu.
OpenHorizontally	Opens the menu horizontally from left to right.
CloseHorizontally	Closes the menu horizonally from right to left.
Shake	Moves the menu back and fourth from left to right.
Bounce	Moves the menu items up and down.
DropInFromTop	The menu items start moving upward from its default location to near the top of the page. The menu item’s opacity decreases as it moves further upward away from its default location.
DropInFromRight	The menu items appear to the far left side of the menu bar and move toward the right and stop once it reaches its default location(the location of its associated parent menu item). The moving menu item’s opacity increases as it moves closer to its default location.
DropInFromBottom	Drops downward with the bottom of the menu items appearing first. The menu’s opacity increases as it moves down to meet with its associated parent menu item.
DropInFromLeft	For a horizontal menu bar, the vertical drop-down menu drops in from the far right and moves to the left of the screen to meet the parent menu item.
DropOutToTop	Moves upward from bottom to the top of the menu bar and gradually fades out as it’s moving upward.
DropOutToRight	Moves to the right of the parent menu and gradually fades as it’s moving to the right.
DropOutToBottom	Drops downward and the opacity of the menu gradually decreases as its moving further down the page.
DropOutToLeft	Drops out toward the left of the parent menu and moves toward the left page. The menu’s opacity gradually lessens as it moves further to the left of the page.