ComponentOne Menu for ASP.NET AJAX: Menu for ASP.NET Task-Based Help > Adding Collapse and Expand Animation Effects

Adding Collapse and Expand Animation Effects

C1Menu contains 27 animation and thirty-one transition effects that allow you to customize interaction with the control. In this topic, you will set the CollapseAnimation, ExpandAnimation, CollapseEasing, ExpandEasing, CollapseDuration, and ExpandDuration properties to create an animation effect while expanding or collapsing menu items.

Setting Animation Effects Using the Designer

Complete the following steps to set animation effects:

1.   Click C1Menu's smart tag to open the C1MenuTasks menu and select Edit Menu. The C1Menu Designer Form appears.

2.   Use the Add Child Item () button to add two link items to your C1Menu.

3.   In treeview, select LinkItem01 and click on the Add Child Item button to add two link items to LinkItem01.

4.   In treeview, select LinkItem01 and navigate to the ExpandAnimation property and set it to "Unfold".

5.   Set the ExpandEasing property to "EaseOutBounce". This property determines the animation transition effect while the menu items are expanding.

6.   Locate the ExpandDuration property and enter "1500" into its textbox. This will lengthen the duration of the animation effect, guaranteeing that you will notice the effect when you build the project.

7.   Set the CollapseAnimation property and set it to "Fold".

8.   Set the CollapseEasing property to "EaseInBounce". This property determines the animation transition effect while the menu items are collapsing.

9.   Locate the CollapseDuration property and enter "1500" into its textbox.

10.  Click OK to save and close the C1Menu Designer Form.

11.  Build the project and observe that the expanding child link items unfold and bounce in before settling into its natural state and the collapsing child link items fold and then bounce in before settling into its natural state.

Setting Animation Effects in Source View

In Source view add ExpandAnimation="Unfold", ExpandDuration="1500", ExpandEasing="EaseOutBounce", CollapseAnimation="Fold", CollapseDuration="1500", and CollapseEasing="EaseInBounce" into the <cc1:C1MenuItem> tag so that it appears similar to the following:

<cc1:C1MenuItem runat="server" CollapseAnimation="Fold" CollapseDuration="1500" CollapseEasing="EaseInBounce"

                    ExpandAnimation="UnFold" ExpandDuration="1500" ExpandEasing="EaseOutBounce" Text="LinkItem01">

                    <Items>

                        <cc1:C1MenuItem runat="server" Text="LinkItem01">

                        </cc1:C1MenuItem>

                        <cc1:C1MenuItem runat="server" Text="LinkItem02">

                        </cc1:C1MenuItem>

                    </Items>

                </cc1:C1MenuItem>

Setting Animation Effects Programmatically

Complete the following steps to set animation effects programmatically:

1.   Import the following namespace into your project:

      Visual Basic

Imports C1.Web.UI.Controls.C1Menu

      C#

using C1.Web.UI.Controls.C1Menu;

2.   Add the following code to the Page_Load event to set the animation effects for the expanding and collapsing menu items:

      Visual Basic

If Not Page.IsPostBack Then

    'create menu item

    Dim item1 As New C1MenuItem()

    item1.Text = "LinkItem01"

    'add item 1 to the main menu bar

    C1Menu1.Items.Add(item1)

    'Set the expand animation effect

    item1.ExpandAnimation = C1.Web.UI.AnimationEffect.UnFold

    'Set the transition for the expand animation effect

    item1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce

    'Set the duration for the expand animation effect

    item1.ExpandDuration = 2500

    'Set the collapse animation effect

    item1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold

    'Set the transition for the collapse animation

    item1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce

    'Set the duration for the collapse animation effect

    item1.CollapseDuration = 2500

        'set item 1 submenu width

    item1.NestedGroupWidth = 120

    'create submenu item

    Dim item1child1 As New C1MenuItem()

    item1child1.Text = "LinkItem01"

    Dim item1child2 As New C1MenuItem()

    item1child2.Text = "LinkItem02"

    'add submenu item to menu Item 1

    item1.Items.Add(item1child1)

    item1.Items.Add(item1child2)

End If

      C#

if (!Page.IsPostBack)

        {

            //create menu item     

            C1MenuItem item1 = new C1MenuItem();

            item1.Text = "LinkItem01";

            //add item 1 to the main menu bar

            C1Menu1.Items.Add(item1);

            //Set the expand animation effect

            item1.ExpandAnimation = C1.Web.UI.AnimationEffect.UnFold;

            //Set the transition for the expand animation effect

            item1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce;

            //Set the duration for the expand animation effect

            item1.ExpandDuration = 2500;

            //Set the collapse animation effect

            item1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold;

            //Set the transition for the collapse animation

            item1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce;

            //Set the duration for the collapse animation effect

            item1.CollapseDuration = 2500;

            //set item 1 submenu width

            item1.NestedGroupWidth = 120;

            //create submenu item

            C1MenuItem item1child1 = new C1MenuItem();

            item1child1.Text = "LinkItem01";

            C1MenuItem item1child2 = new C1MenuItem();

            item1child2.Text = "LinkItem02";

            //add submenu item to menu Item 1

            item1.Items.Add(item1child1);

            item1.Items.Add(item1child2);

        }

3.   Run the program and observe that the expanding child link items unfold and bounce in before settling into its natural state and the collapsing child link items fold and then bounce in before settling into its natural state.


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.