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 / Images Only

  • Products
    • RadControls for ASP.NET Ajax
    • WinForms Controls
    • WPF Controls
    • Silverlight Controls
    • Telerik Reporting
    • Telerik OpenAccess ORM
    • Sitefinity ASP.NET CMS
    • WebUI TestStudio
  • Purchase
    • Buy Now
    • Renewals and Upgrades
    • License Agreement
    • FAQ
    • Purchase Orders
    • Contact Sales
  • Community
    • Forums
    • Blogs
    • Events
    • Code Library
    • Learning Resources
    • Announcements
    • Free Products
  • Corporate
    • About Telerik
    • Press Center
    • Careers
    • Contact Us

  • You can achieve an image-only appearance of the menu without using CSS styles.

    The RadMenuItem class exposes the so called ImageUrl and HoveredImageUrl properties. These allow you to have one image for the initial state of a menu item and another image for the hover state.

    Not that EnableImagePreloading is set to "true".
    All item images, including hovered and selected images, will be preloaded to improve the responsiveness of the menu.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ 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.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
        <style type="text/css">
            div.RadMenu a.rmLink .rmLeftImage
            {
                position: relative;
            }
            
            div.RadMenu .rmItem .rmLink .rmLeftImage,
            div.RadMenu .rmItem .rmLink,
            div.RadMenu .rmLink .rmText
            {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#" ShowSkinChooser="false">
            </qsf:Header>
            <div style="background: #370014; height: 300px">
                <telerik:RadMenu ID="RadMenu1" runat="server" Skin="" EnableImagePreloading="true" Style="margin-bottom: 200px;"
                    DefaultGroupSettings-OffsetY="-1">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="Images/Products.gif" HoveredImageUrl="Images/Products_hov.gif"
                            ExpandedImageUrl="Images/Products_hov.gif" ToolTip="Products">
                            <Items>
                                <telerik:RadMenuItem ImageUrl="Images/Products/1.gif" HoveredImageUrl="Images/Products/1_hov.gif"
                                    ToolTip="RadControls for ASP.NET Ajax" />
                                <telerik:RadMenuItem ImageUrl="Images/Products/2.gif" HoveredImageUrl="Images/Products/2_hov.gif"
                                    ToolTip="WinForms Controls" />
                                <telerik:RadMenuItem ImageUrl="Images/Products/3.gif" HoveredImageUrl="Images/Products/3_hov.gif"
                                    ToolTip="WPF Controls" />
                                <telerik:RadMenuItem ImageUrl="Images/Products/4.gif" HoveredImageUrl="Images/Products/4_hov.gif"
                                    ToolTip="Silverlight Controls" />
                                <telerik:RadMenuItem ImageUrl="Images/Products/5.gif" HoveredImageUrl="Images/Products/5_hov.gif"
                                    ToolTip="Telerik Reporting" />
                                <telerik:RadMenuItem ImageUrl="Images/Products/6.gif" HoveredImageUrl="Images/Products/6_hov.gif"
                                    ToolTip="Telerik OpenAccess ORM" />
                                <telerik:RadMenuItem ImageUrl="Images/Products/7.gif" HoveredImageUrl="Images/Products/7_hov.gif"
                                    ToolTip="Sitefinity ASP.NET CMS" />
                                <telerik:RadMenuItem ImageUrl="Images/Products/8.gif" HoveredImageUrl="Images/Products/8_hov.gif"
                                    ToolTip="WebUI TestStudio" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem ImageUrl="Images/Purchase.gif" HoveredImageUrl="Images/Purchase_hov.gif"
                            ExpandedImageUrl="Images/Purchase_hov.gif" ToolTip="Purchase">
                            <Items>
                                <telerik:RadMenuItem ImageUrl="Images/Purchase/1.gif" HoveredImageUrl="Images/Purchase/1_hov.gif"
                                    ToolTip="Buy Now" />
                                <telerik:RadMenuItem ImageUrl="Images/Purchase/2.gif" HoveredImageUrl="Images/Purchase/2_hov.gif"
                                    ToolTip="Renewals and Upgrades" />
                                <telerik:RadMenuItem ImageUrl="Images/Purchase/3.gif" HoveredImageUrl="Images/Purchase/3_hov.gif"
                                    ToolTip="License Agreement" />
                                <telerik:RadMenuItem ImageUrl="Images/Purchase/4.gif" HoveredImageUrl="Images/Purchase/4_hov.gif"
                                    ToolTip="FAQ" />
                                <telerik:RadMenuItem ImageUrl="Images/Purchase/5.gif" HoveredImageUrl="Images/Purchase/5_hov.gif"
                                    ToolTip="Purchase Orders" />
                                <telerik:RadMenuItem ImageUrl="Images/Purchase/6.gif" HoveredImageUrl="Images/Purchase/6_hov.gif"
                                    ToolTip="Contact Sales" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem ImageUrl="Images/Community.gif" HoveredImageUrl="Images/Community_hov.gif"
                            ExpandedImageUrl="Images/Community_hov.gif" ToolTip="Community">
                            <Items>
                                <telerik:RadMenuItem ImageUrl="Images/Community/1.gif" HoveredImageUrl="Images/Community/1_hov.gif"
                                    ToolTip="Forums" />
                                <telerik:RadMenuItem ImageUrl="Images/Community/2.gif" HoveredImageUrl="Images/Community/2_hov.gif"
                                    ToolTip="Blogs" />
                                <telerik:RadMenuItem ImageUrl="Images/Community/3.gif" HoveredImageUrl="Images/Community/3_hov.gif"
                                    ToolTip="Events" />
                                <telerik:RadMenuItem ImageUrl="Images/Community/4.gif" HoveredImageUrl="Images/Community/4_hov.gif"
                                    ToolTip="Code Library" />
                                <telerik:RadMenuItem ImageUrl="Images/Community/5.gif" HoveredImageUrl="Images/Community/5_hov.gif"
                                    ToolTip="Learning Resources" />
                                <telerik:RadMenuItem ImageUrl="Images/Community/6.gif" HoveredImageUrl="Images/Community/6_hov.gif"
                                    ToolTip="Announcements" />
                                <telerik:RadMenuItem ImageUrl="Images/Community/7.gif" HoveredImageUrl="Images/Community/7_hov.gif"
                                    ToolTip="Free Products" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem ImageUrl="Images/Corporate.gif" HoveredImageUrl="Images/Corporate_hov.gif"
                            ExpandedImageUrl="Images/Corporate_hov.gif" ToolTip="Corporate">
                            <Items>
                                <telerik:RadMenuItem ImageUrl="Images/Corporate/1.gif" HoveredImageUrl="Images/Corporate/1_hov.gif"
                                    ToolTip="About Telerik" />
                                <telerik:RadMenuItem ImageUrl="Images/Corporate/2.gif" HoveredImageUrl="Images/Corporate/2_hov.gif"
                                    ToolTip="Press Center" />
                                <telerik:RadMenuItem ImageUrl="Images/Corporate/3.gif" HoveredImageUrl="Images/Corporate/3_hov.gif"
                                    ToolTip="Careers" />
                                <telerik:RadMenuItem ImageUrl="Images/Corporate/4.gif" HoveredImageUrl="Images/Corporate/4_hov.gif"
                                    ToolTip="Contact Us" />
                            </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