New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Property Explorer

  • Demo Configurator
  • Orientation


Animation
  • Expand Animation TypeOutQuart
    Spin UpSpin Down
  • Collapse Animation TypeOutQuart
    Spin UpSpin Down

RadMenu control exposes different properties that enable you to easily customize its default behavior and appearance. This demo exemplifies how you can turn on and off various properties of the control and experience the difference in its behavior.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits=" Menu.Examples.Functionality.PropertyExplorer.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <div class="demo-container size-medium">
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true">
            <Items>
                <telerik:RadMenuItem Text="File" AccessKey="F">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/11new.gif" Text="New" AccessKey="w" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/12open.gif" Text="Open" AccessKey="O" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/13Save.gif" Text="Save" AccessKey="S" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/14SaveAs.gif" Text="Save As" AccessKey="A" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/15printPreview.gif" Text="Print Preview"
                            AccessKey="V" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/16print.gif" Text="Print" AccessKey="P" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/17close.gif" Text="Close" AccessKey="C" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Edit" AccessKey="E">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/21undo.gif" Text="Undo" AccessKey="U" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/cut.png" Text="Cut" AccessKey="T" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/copy.png" Text="Copy" AccessKey="C" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/paste.png" Text="Paste" AccessKey="P" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/23clipboard.gif" Text="Clipboard..."
                            AccessKey="b" />
                        <telerik:RadMenuItem IsSeparator="True" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Insert" AccessKey="I">
                    <Items>
                        <telerik:RadMenuItem Text="Break..." AccessKey="B" />
                        <telerik:RadMenuItem Text="Page Numbers..." AccessKey="U" />
                        <telerik:RadMenuItem Text="Date and Time..." AccessKey="T" />
                        <telerik:RadMenuItem Text="Field..." AccessKey="F" />
                        <telerik:RadMenuItem Text="Symbol..." AccessKey="S" />
                        <telerik:RadMenuItem Text="Comment" AccessKey="M" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Picture" AccessKey="P" />
                        <telerik:RadMenuItem Text="Diagram" AccessKey="G" />
                        <telerik:RadMenuItem Text="Text Box" AccessKey="X" />
                        <telerik:RadMenuItem Text="Hyperlink" AccessKey="I" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Format" AccessKey="O">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/26Font.gif" Text="Font" GroupSettings-Height="200">
                            <Items>
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Verdana" />
                                <telerik:RadMenuItem Text="Tahoma" />
                                <telerik:RadMenuItem Text="Sans-serif" />
                                <telerik:RadMenuItem IsSeparator="true" />
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Arial Black" />
                                <telerik:RadMenuItem Text="Arial Narrow" />
                                <telerik:RadMenuItem Text="Arial Unicode MS" />
                                <telerik:RadMenuItem Text="Bookman Old Style" />
                                <telerik:RadMenuItem Text="Bookshelf Symbol 7" />
                                <telerik:RadMenuItem Text="Century" />
                                <telerik:RadMenuItem Text="Century Gothic" />
                                <telerik:RadMenuItem Text="Comic Sans MS" />
                                <telerik:RadMenuItem Text="Courier New" />
                                <telerik:RadMenuItem Text="Garamond" />
                                <telerik:RadMenuItem Text="Georgia" />
                                <telerik:RadMenuItem Text="Goudy Old Style" />
                                <telerik:RadMenuItem Text="Goudy Stout" />
                                <telerik:RadMenuItem Text="Haettenschweiler" />
                                <telerik:RadMenuItem Text="Helvetica" />
                                <telerik:RadMenuItem Text="Impact" />
                                <telerik:RadMenuItem Text="Imprint MT Shadow" />
                                <telerik:RadMenuItem Text="Latha" />
                                <telerik:RadMenuItem Text="Lucida Console" />
                                <telerik:RadMenuItem Text="Lucida Sans" />
                                <telerik:RadMenuItem Text="Lucida Sans Typewriter" />
                                <telerik:RadMenuItem Text="Lucida Sans Unicode" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Paragraph..." AccessKey="P" />
                        <telerik:RadMenuItem Text="Bullets and Numbering..." AccessKey="N" />
                        <telerik:RadMenuItem Text="Borders and Shading..." AccessKey="B" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Columns" AccessKey="C" />
                        <telerik:RadMenuItem Text="Tabs" AccessKey="T" />
                        <telerik:RadMenuItem Text="Change Case" AccessKey="E" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/25BgColor.gif" Text="Background" AccessKey="g">
                            <Items>
                                <telerik:RadMenuItem>
                                    <ItemTemplate>
                                        <div style="padding: 20px 0 20px 20px;">
                                            <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" Preset="Metro" ShowEmptyColor="false"
                                                Width="200px" SelectedColor="#000000" Skin="Metro" />
                                        </div>
                                    </ItemTemplate>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="More Colors..." AccessKey="M" />
                                <telerik:RadMenuItem Text="Fill Efects..." AccessKey="F" />
                                <telerik:RadMenuItem ImageUrl="~/Menu/Images/253Watermark.gif" Text="Printed Watermark..."
                                    AccessKey="W" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Theme" AccessKey="H" />
                        <telerik:RadMenuItem Text="Frames" AccessKey="R" />
                        <telerik:RadMenuItem Text="Autoformat" AccessKey="A" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="View" AccessKey="V">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/31normal.gif" Text="Normal" AccessKey="N" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/32web.gif" Text="Web Layout" AccessKey="W" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/33print.gif" Text="Print Layout" AccessKey="P" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem ImageUrl="~/Menu/Images/34Tasks.gif" Text="Task Pane" AccessKey="p" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Tools" AccessKey="T">
                    <Items>
                        <telerik:RadMenuItem Text="Spelling And Grammar..." AccessKey="S" />
                        <telerik:RadMenuItem Text="Research..." AccessKey="R" />
                        <telerik:RadMenuItem Text="Language" AccessKey="L" />
                        <telerik:RadMenuItem Text="Word Count..." AccessKey="W" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Track Changes" AccessKey="T" />
                        <telerik:RadMenuItem Text="Compare And Merge Documents.." AccessKey="D" />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>

    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            function applySettings() {
                var menu = $find("<%= RadMenu1.ClientID %>");

                //set the expand animation
                var expandAnimationTypeDropDown = $find("<%= ExpandAnimationDropDownList.ClientID %>"),
                expandAnimationType = Telerik.Web.UI.AnimationType.parse(expandAnimationTypeDropDown.get_selectedItem().get_text());
                menu.get_expandAnimation().set_type(expandAnimationType);

                //set the expand duration
                var expandDurationTextBox = $find("<%= ExpandDurationTextBox.ClientID %>"),
                expandDuration = parseInt(expandDurationTextBox.get_value());
                menu.get_expandAnimation().set_duration(expandDuration);

                // set the collapse animation
                var collapseAnimationTypeDropDown = $find("<%= ColapseAnimationDropDownList.ClientID %>"),
                collapseAnimationType = Telerik.Web.UI.AnimationType.parse(collapseAnimationTypeDropDown.get_selectedItem().get_text());
                menu.get_collapseAnimation().set_type(collapseAnimationType);

                //set collapse duration
                var collapseDurationTextBox = $find("<%= CollapseDurationTextBox.ClientID %>"),
                collapseDuration = parseInt(collapseDurationTextBox.get_value());
                menu.get_collapseAnimation().set_duration(collapseDuration);

                var firstItem = menu.get_items().getItem(0);

                if (!menu.get_openedItem()) {
                    firstItem.open();
                } else {
                    firstItem.close();
                }
            }
        </script>
    </telerik:RadCodeBlock>


    <qsf:ConfiguratorPanel ID="ConfigurationPanel" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox"><asp:CheckBox runat="server" ID="ClickToOpenCheckBox" Text="ClickToOpen" AutoPostBack="true"/></span>
                        </li>
                        <li>
                            <qsf:RadioButtonList runat="server" ID="OrientationButtonList" Label="Orientation" Orientation="Horizontal" AutoPostBack="true">
                                <asp:ListItem Text="Horizontal" Value="Horizontal" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn Title="Animation" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="ExpandAnimationDropDownList" Size="Wide" Label="Expand Animation Type" />
                            <qsf:NumericTextBox runat="server" ID="ExpandDurationTextBox" Size="Narrow" Label="Duration (ms)"
                                MinValue="0" MaxValue="3000" IncrementSettings-Step="100" NumberFormat-DecimalDigits="0" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="ColapseAnimationDropDownList" Label="Collapse Animation Type" Size="Wide" />
                            <qsf:NumericTextBox runat="server" ID="CollapseDurationTextBox" Size="Narrow" Label="Duration (ms)"
                                MinValue="0" MaxValue="3000" IncrementSettings-Step="100" NumberFormat-DecimalDigits="0" />
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="ApplySettingsButton" Text="Update Animation" AutoPostBack="false" OnClientClicked="applySettings" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance