This is a migrated thread and some comments may be shown as answers.

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

1 Answer 60 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ali
Top achievements
Rank 1
Ali asked on 18 Dec 2012, 10:36 AM
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?

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 18 Dec 2012, 11:30 AM
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.
Tags
Menu
Asked by
Ali
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or