Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Menu / Mega Drop-Down


  • This example demonstrates how to create large structured menus. As you will see, the first two root items of the menu contain RadSitemap. The second two items were created with custom html templates.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Menu.MegaDropDown.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
        <link rel="stylesheet" type="text/css" href="Style.css" />
    </head>
    <body class="BODY">
        <form id="form1" method="post" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false">
        </telerik:RadScriptManager>
        <qsf:Header ID="Header1" runat="server" ShowSkinChooser="false" NavigationLanguage="VB" />
        <telerik:RadToolTipManager runat="server" ID="ToolTipManager" AutoTooltipify="true"
            Position="TopRight" Skin="Office2007" />
        <div id="MegaDropDown">

            <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:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity" OnClientItemOpened="itemOpened"
                Width="880px" Height="60px" EnableShadows="true">
                <Items>
                    <telerik:RadMenuItem Text="Products" PostBack="false">
                        <Items>
                            <telerik:RadMenuItem CssClass="Products" Width="640px">
                                <ItemTemplate>
                                    <div id="CatWrapper" class="Wrapper" style="width: 435px;">
                                        <h3>
                                            Categories</h3>
                                        <telerik:RadSiteMap ID="RadSiteMap1" runat="server" Skin="Hay">
                                            <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 & 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 & 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="Img/lamp.jpg" alt="Deco Mirror Table Lamp - $ 24.99" width="128px" height="150px" />
                                        <p>
                                            Deco Mirror Table Lamp
                                            <br />
                                            <span class="price">$ 24.99</span></p>
                                    </div>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Stores" PostBack="false">
                        <Items>
                            <telerik:RadMenuItem CssClass="Stores" Width="640px">
                                <ItemTemplate>
                                    <div id="StoreWrapper" class="Wrapper">
                                        <h3>
                                            Around the Globe</h3>
                                        <img src="Img/world.gif" width="355" height="210" id="world"
                                            usemap="#m_world" alt="world" />
                                        <map name="m_world" 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="Hay" Width="250px" Style="padding-top: 30px;">
                                            <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>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="News" PostBack="false">
                        <Items>
                            <telerik:RadMenuItem CssClass="News" Width="640px">
                                <ItemTemplate>
                                    <div id="NewsWrapper" class="Wrapper">
                                        <h3>
                                            Latest News</h3>
                                        <div class="newsLeft">
                                            <img src="Img/interior.png" alt="interior" />
                                            <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�s reputation for simple
                                                but opulent styling has ...</p>
                                        </div>
                                        <table cellspacing="0" cellpadding="0" width="290px">
                                            <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>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Events" PostBack="false">
                        <Items>
                            <telerik:RadMenuItem CssClass="Events" Width="640px">
                                <ItemTemplate>
                                    <div id="EventWrapper" class="Wrapper">
                                        <h3>
                                            Industry Events</h3>
                                        <div class="newsLeft">
                                            <img src="Img/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="290px">
                                            <tr>
                                                <td>
                                                    <span>01/02/2010</span>
                                                </td>
                                                <td>
                                                    <a href="#" class="eventLink">International Interior & 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 & 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>
                                </ItemTemplate>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
        <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451