Overview

EO.Web Menu supports 60+ expand/collapse effects. Features include:

• Apply different effects on different submenus.
• Apply effects on a look item, then apply the look item to a group of navigation items.
• Apply effects on a skin, then apply the skin to a menu;

This section demonstrates how to apply ExpandEffect to a submenu using Menu Builder.

Applying Effects using Menu Builder

Following these steps to apply expand effect to a submenu in Visual Studio:

1. Drag an EO.Web Menu control from the toolbox and drop it on the page. If you can not find EO.Web menu control in Visual Studio's toolbox, please refer to Installation guide;
2. Right click the menu, select Menu Builder from the designer context menu to start Menu Builder;
3. In the Skin tab, choose one of the built-in skins to start from. The right pane displays the rendered result of the skin menu. If you do not want to use a skin, you can switch to Menu tab directly;
4. In the Menu tab, click on navigation items node. Click New navigation item button on the toolbar a few times to create a few new navigation items;
5. Select one of the navigation item you just created, click New navigation item button on the toolbar a few times to create a few sub navigation items;
6. Select the parent navigation item, click on Sub Menu button on tool bar, select ExpandEffect property, click the drop down button and select the effect type;
7. Switch to the Preview tab to preview the result.

Use the same steps to set CollapseEffect . Note that if specified, EO.Web Menu automatically renders the "reverse effect" of the specified collapse effect. Rendering the "reverse effect" for CollapseEffect makes it easy to set both ExpandEffect and CollapseEffect to the same value without worrying about whether they match.