Example code for a megadropdown menu that mimics the Telerik home page menu

2 posts, 0 answers
  1. Ali
    Ali avatar
    24 posts
    Member since:
    Apr 2010

    Posted 18 Dec 2012 Link to this post

    Example code for a megadropdown menu that mimics the Telerik home page menu:

    Hi,
    I love the Telerik home page menu where you have a black bar, logo on the left, product families in the middle, account info/about us on the right. When clicked on the 'product families' link a 'megadropdown' menu appears. For my project I need a megadropdown menu that have exactly the same functionality: a megadropdown menu that is shown by clicking a button/link in the middle.

    Will you share a sample code that will mimic the menu in Telerik's website?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Dec 2012 Link to this post

    Hi,

    Please take a look into the following sample code.

    ASPX:
    <telerik:RadMenu runat="server" ID="RadMenu1" Skin="Black" Width="960px" Height="60px" EnableShadows="true" ClickToOpen="true" CollapseAnimation-Type="None">
        <Items>
            <telerik:RadMenuItem PostBack="false" IsSeparator="true" Width="465px">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Menu" PostBack="false">
                <Items>
                    <telerik:RadMenuItem>
                        <ItemTemplate>
                            <div id="wrap1">
                                <div id="EventWrapper" class="Wrapper">
                                    <div id="PersonelDiv" style="height: 100px">
                                        <h3>
                                            Personal</h3>
                                    </div>
                                    <div id="DocumentsDiv" style="height: 100px">
                                        <h3>
                                            Documents</h3>
                                    </div>
                                    <div id="ResourcesDiv" style="height: 100px">
                                        <h3>
                                            Resources</h3>
                                    </div>
                                    <div id="MessagesDiv" style="height: 100px">
                                        <h3>
                                            Messages</h3>
                                    </div>
                                </div>
                                <div id="closeButton1" class="closeButton">
                                    <table>
                                        <tr style="text-align: center">
                                            <td style="width: 460px">
                                            </td>
                                            <td>
                                                <telerik:RadButton Text="close" ID="btn1" runat="server" OnClientClicking="OnClientClicking">
                                                </telerik:RadButton>
                                                <asp:LinkButton ID="CloseLinkButton" runat="server" OnClientClick="CloseMenu();return false;">Close</asp:LinkButton>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </ItemTemplate>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" IsSeparator="True" Text="Separator" Width="386px">
                <GroupSettings Flow="Horizontal" />
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    JS:
    <script type="text/javascript">
        function CloseMenu(s, e) {
            var menu = $find("<%= RadMenu1.ClientID %>");
            menu.get_collapseAnimation().set_type(5);
            menu.get_collapseAnimation().set_duration(500);
            menu.close();
            menu.set_clickedToOpen(false);
        }
        function OnClientClicking(sender) {
            sender.set_autoPostBack(false);
            var menu = $find("RadMenu1");
            var item = menu.findItemByText("Menu");
            item.close();
        }  
    </script>

    Hope this helps.

    Regards,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top