Menu - Mega Dropdown Menu

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how to create large structured menus by using the ContentTemplate container of the RadMenu items (this template is added to the control in Q1 2014). As you will see, the first two root items of the menu contain RadSitemap while the second two items were created with custom html templates.

  • DefaultCS.aspx
  • styles.css
<%@ Page  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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:RadToolTipManager RenderMode="Lightweight" runat="server" ID="ToolTipManager" AutoTooltipify="true"
        Position="TopRight" Skin="Office2007">
    </telerik:RadToolTipManager>

    <div class="demo-container no-bg">
        <div id="MegaDropDown">
            <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Default" OnClientItemOpened="itemOpened"
                Width="880" Height="60" EnableShadows="true">
                <Items>
                    <telerik:RadMenuItem Text="Products" PostBack="false">
                        <ContentTemplate>
                            <div id="CatWrapper" class="Wrapper" style="width: 435px;">
                                <h3>Categories</h3>
                                <telerik:RadSiteMap ID="RadSiteMap1" runat="server" Skin="Telerik" EnableTextHTMLEncoding="true">
                                    <LevelSettings>
                                        <telerik:SiteMapLevelSetting Level="0">
                                            <ListLayout RepeatColumns="3" RepeatDirection="Vertical" />
                                        </telerik:SiteMapLevelSetting>
                                    </LevelSettings>
                                    <Nodes>
                                        <telerik:RadSiteMapNode NavigateUrl="#" Text="Furniture">
                                            <Nodes>
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Tables &amp; Chairs" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Sofas" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Occasional Furniture" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Childerns Furniture" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Beds" />
                                            </Nodes>
                                        </telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode NavigateUrl="#" Text="Decor">
                                            <Nodes>
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Bed Linen" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Throws" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Curtains &amp; Blinds" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Rugs" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Carpets" />
                                            </Nodes>
                                        </telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode NavigateUrl="#" Text="Storage">
                                            <Nodes>
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Wall Shelving" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Kids Storage" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Baskets" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Multimedia Storage" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Floor Shelving" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Toilet Roll Holders" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Storage Jars" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Drawers" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Boxes" />
                                            </Nodes>
                                        </telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode NavigateUrl="#" Text="Lights">
                                            <Nodes>
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Ceiling" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Table" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Floor" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Shades" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Wall Lights" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Spotlights" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Push Light" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="String Lights" />
                                            </Nodes>
                                        </telerik:RadSiteMapNode>
                                    </Nodes>
                                </telerik:RadSiteMap>
                            </div>
                            <div id="FeatProduct">
                                <h3>Featured</h3>
                                <img src="images/lamp.jpg" alt="Deco Mirror Table Lamp - $ 24.99" width="128" height="150" />
                                <p>
                                    Deco Mirror Table Lamp
                                    <br />
                                    <span class="price">$ 24.99</span>
                                </p>
                            </div>
                        </ContentTemplate>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Stores" PostBack="false">
                        <ContentTemplate>
                            <div id="StoreWrapper" class="Wrapper">
                                <h3>Around the Globe</h3>
                                <img id="world" src="images/world.gif" width="355" height="210" usemap="m_world" alt="world" />
                                <map id="m_world">
                                    <area shape="circle" coords="309,171, 5" href="#" alt="New Zealand" />
                                    <area shape="circle" coords="278,153, 5" href="#" alt="Australia" />
                                    <area shape="circle" coords="272,116, 5" href="#" alt="Philippines" />
                                    <area shape="circle" coords="255,128, 5" href="#" alt="Malaysia" />
                                    <area shape="circle" coords="234,105, 5" href="#" alt="India" />
                                    <area shape="circle" coords="200,98, 5" href="#" alt="Middle East" />
                                    <area shape="circle" coords="173,80, 5" href="#" alt="Europe" />
                                    <area shape="circle" coords="161,73, 5" href="#" alt="United Kingdom" />
                                    <area shape="circle" coords="85,91, 5" href="#" alt="United States" />
                                    <area shape="circle" coords="80,73, 5" href="#" alt="Canada" />
                                </map>
                                <telerik:RadSiteMap ID="RadSiteMap2" runat="server" Skin="Telerik" Width="250" Style="padding-top: 30px;"
                                    EnableTextHTMLEncoding="true">
                                    <LevelSettings>
                                        <telerik:SiteMapLevelSetting Level="0">
                                            <ListLayout RepeatColumns="2" RepeatDirection="Vertical" />
                                        </telerik:SiteMapLevelSetting>
                                    </LevelSettings>
                                    <Nodes>
                                        <telerik:RadSiteMapNode>
                                            <Nodes>
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Australia" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Canada" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Europe" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="India" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Malaysia" />
                                            </Nodes>
                                        </telerik:RadSiteMapNode>
                                        <telerik:RadSiteMapNode>
                                            <Nodes>
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Middle East" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="New Zealand" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="Philippines" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="United Kingdom" />
                                                <telerik:RadSiteMapNode NavigateUrl="#" Text="United States" />
                                            </Nodes>
                                        </telerik:RadSiteMapNode>
                                    </Nodes>
                                </telerik:RadSiteMap>
                                <a class="moreLink" href="#">See full list &raquo;</a>
                            </div>
                        </ContentTemplate>
                    </telerik:RadMenuItem>

                    <telerik:RadMenuItem Text="News" PostBack="false">

                        <ContentTemplate>
                            <div id="NewsWrapper" class="Wrapper">
                                <h3>Latest News</h3>
                                <div class="newsLeft">
                                    <img src="images/interior.png" alt="news" />
                                    <h2><a href="#">Kelly Hoppen to speak at interiors 2010</a></h2>
                                    <span>01/02/2010</span>
                                    <p>
                                        Internationally acclaimed British interior designer, Kelly Hoppen, will present
                                        a seminar at interiors 2010 on Wednesday 27th January. Kelly&apos;s reputation for
                                        simple but opulent styling has ...
                                    </p>
                                </div>
                                <table cellspacing="0" cellpadding="0" width="290">
                                    <tr>
                                        <td>
                                            <span>02/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="newsLink">PANTONE Color Report Fall 2010</a><br />
                                            In conjunction with New York Fashion Week, Pantone today released the PANTONE Fashion
                                            Color Report Fall 2010 ...
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>03/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="newsLink">Interiors 2010 reports great business</a><br />
                                            Interiors 2010, the first and largest dedicated UK ...
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>04/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="newsLink">San Francisco Design Week 2010</a><br />
                                            The mission of Design Week raise public awareness of Design ...
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>05/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="newsLink">Travel + Leisure 2010 Design Award Winners</a><br />
                                            The most outstanding new examples of design and architecture ...
                                        </td>
                                    </tr>
                                </table>
                                <a class="moreLink" href="#">View all &raquo;</a>
                            </div>
                        </ContentTemplate>
                    </telerik:RadMenuItem>

                    <telerik:RadMenuItem Text="Events" PostBack="false">

                        <ContentTemplate>
                            <div id="EventWrapper" class="Wrapper">
                                <h3>Industry Events</h3>
                                <div class="newsLeft">
                                    <img src="images/events.jpg" alt="events" />
                                    <h2><a href="#">International Furniture Fair Tokyo (IFFT)</a></h2>
                                    <span>10/02/2010</span>
                                    <p>
                                        Furniture design event inaugurated in 1979 featuring furniture and interior design
                                        exhibitors from all over the world.
                                    </p>
                                </div>
                                <table cellspacing="0" cellpadding="0" width="290">
                                    <tr>
                                        <td>
                                            <span>01/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">International Interior &amp; Furniture Exhibition (IFEX)</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>02/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">Australian International Furniture Fair </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>03/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">Las Vegas Furniture Show </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>04/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">Home Fashion &amp; Design Shanghai</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>05/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">imm cologne </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>06/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">Malaysian International Furniture Fair </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>07/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">Salon du Meuble de Paris </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span>08/02/2010</span>
                                        </td>
                                        <td>
                                            <a href="#" class="eventLink">ICFF: International Contemporary Furniture Fair</a>
                                        </td>
                                    </tr>
                                </table>
                                <a class="moreLink" href="#">View all &raquo;</a>
                            </div>
                        </ContentTemplate>
                    </telerik:RadMenuItem>

                </Items>
            </telerik:RadMenu>
        </div>
    </div>

    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            function itemOpened(s, e) {
                if ($telerik.isIE8) {
                    // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                    $telerik.$("li", e.get_item().get_element())
                        .each(function() { this.style.cssText = this.style.cssText; });
                }
            }
        </script>
    </telerik:RadScriptBlock>

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

Find Assistance

Help Us Improve

Was this example helpful?