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 / IPhone Menu

Example Configuration
Orientation:
 
 

  • RadMenu skinning is flexible enough to support mobile devices, even the iPhone. Some javascript magic (iPodRadMenu.js) and you can enable all users to have a beautiful, compact navigation on the page.

    This skin extensively supports templates, as seen in the Videos and Albums submenus. IPhone-like scrolling can be observed on child menus, such as "Artists" and "On-The-Go"

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ 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" %>

    <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Menu.Skins.DefaultCS" %>

    <!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">
        <meta name="viewport" content="width=device-width" />

        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
        
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link href="iPhone/Menu.iPhone.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#" ShowSkinChooser="false"/>
            
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="true">
                <div class="orientationLabel">Orientation:</div>
                <div class="verticalButton" onclick="iPodMenu1.changeOrientation('Vertical')">&nbsp;</div>
                <div class="horizontalButton" onclick="iPodMenu1.changeOrientation('Horizontal')">&nbsp;</div>
            </qsf:ConfiguratorPanel>
        
            <div id="iPhoneFrame" class="OrientationVertical">
             <div id="RadMenu_iPhone_wrapper">
             <a class="backButton" title="Back"><span>Back</span></a>
            
                    <div id="RadMenu_iPhone_Content">
                 <telerik:RadMenu
                            runat="server" ID="RadMenu1" EnableSelection="false"
                            EnableEmbeddedSkins="false" Skin="iPhone"
                            ClickToOpen="true" Flow="vertical">
             <Items>
             <telerik:RadMenuItem Text="Playlists">
             <Items>
             <telerik:RadMenuItem Text="On-The-Go">
             <Items>
                                            <telerik:RadMenuItem Text="Papa Roach - Scars" />
                                            <telerik:RadMenuItem Text="John Rzeznik - I'm Still Here" />
                                            <telerik:RadMenuItem Text="Placebo - Every You, Every Me" />
                                            <telerik:RadMenuItem Text="Nickelback - Animals" />
                                            <telerik:RadMenuItem Text="Linkin Park - Nobody's Listening" />
             <telerik:RadMenuItem Text="Haloo Helsinki - Haloo Helsinki" />
                                            <telerik:RadMenuItem Text="Korpiklaani - Kirki" />
                                            <telerik:RadMenuItem Text="Rammstein - Rosenrot" />
                                            <telerik:RadMenuItem Text="Lumsk - Svend Herlufsens Ord" />
                                            <telerik:RadMenuItem Text="Nofx - The Decline" />
                                            <telerik:RadMenuItem Text="System of a Down - Chop Suey!" />
                                            <telerik:RadMenuItem Text="Dunderbeist - Grrl" />
                                            <telerik:RadMenuItem Text="Rammstein - Sonne" />
                                            <telerik:RadMenuItem Text="Ruoska - Pirunkieli" />
                                            <telerik:RadMenuItem Text="Juno Reactor - Conga Fury" />
                                            <telerik:RadMenuItem Text="System of a Down - Atwa" />
             </Items>
             </telerik:RadMenuItem>
             <telerik:RadMenuItem Text="90's Music" />
             <telerik:RadMenuItem Text="My Top Rated" />
             <telerik:RadMenuItem Text="Recently Played" />
             <telerik:RadMenuItem Text="Top 25 Most Played" />
             </Items>
             </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Videos">
             <Items>
             <telerik:RadMenuItem
                                        Video="http://tv.telerik.com//telerikrealworld/episode/Telerik_Real_World_-_University_of_Southern_California"
                                        Image="http://tv.telerik.com/images/channels/telerikrealworld.png"
                                        Title="University of Southern California"
                                        Length="21:38" />
             <telerik:RadMenuItem
                                        Video="http://tv.telerik.com/radtips/radeditor/RadEditor_for_ASP.NET_AJAX_-_Export_to_PDF"
                                        Image="http://tv.telerik.com/images/channels/radtips.png"
                                        Title="RadEditor for ASP.NET AJAX - Export to PDF"
                                        Length="08:30" />
             <telerik:RadMenuItem
                                        Video="http://tv.telerik.com/edgeofdev/episode/EdgeOfDev_Tim_Huckaby_on_Microsoft_Surface"
                                        Image="http://tv.telerik.com/images/channels/edgeofdev.png"
                                        Title="Tim Huckaby on Microsoft Surface"
                                        Length="17:09" />
             <telerik:RadMenuItem
                                        Video="http://tv.telerik.com/telerikrealworld/episode/Lino_Tadros_Shows_Off_ActiveFocus"
                                        Image="http://tv.telerik.com/images/channels/telerikrealworld.png"
                                        Title="Lino Tadros Shows Off ActiveFocus"
                                        Length="06:38" />
             <telerik:RadMenuItem
                                        Video="http://tv.telerik.com/telerikwatchminute/episode/Telerik_Watch_Minute_Silverlight_RadGridView_Beta"
                                        Image="http://tv.telerik.com/images/channels/telerikwatchminute.png"
                                        Title="Silverlight RadGridView Beta"
                                        Length="08:45" />
             <telerik:RadMenuItem
                                        Video="http://tv.telerik.com/radtips/episode/Client-Side_Data_Binding_with_the_RadGrid"
                                        Image="http://tv.telerik.com/images/channels/radtips.png"
                                        Title="Client-Side Data Binding with the RadGrid"
                                        Length="06:38" />
             </Items>
                            </telerik:RadMenuItem>
             <telerik:RadMenuItem Text="Artists">
             <Items>
             <telerik:RadMenuItem Text="Ayreon" />
             <telerik:RadMenuItem Text="Edguy" />
             <telerik:RadMenuItem Text="Haloo Helsinki" />
             <telerik:RadMenuItem Text="Korpiklaani" />
             <telerik:RadMenuItem Text="Linkin Park" />
             <telerik:RadMenuItem Text="Nickelback" />
             <telerik:RadMenuItem Text="Nofx" />
             <telerik:RadMenuItem Text="Papa Roach" />
             <telerik:RadMenuItem Text="Rammstein" />
             <telerik:RadMenuItem Text="Ruoska" />
             <telerik:RadMenuItem Text="Zeromancer" />
             </Items>
             </telerik:RadMenuItem>
             <telerik:RadMenuItem Text="Songs">
             <Items>
             <telerik:RadMenuItem Text="Animals" />
             <telerik:RadMenuItem Text="Barcelona" />
                                    <telerik:RadMenuItem Text="Asturias" />
                                    <telerik:RadMenuItem Text="Atwa" />
                                    <telerik:RadMenuItem Text="Big Brother" />
                                    <telerik:RadMenuItem Text="Entre Dos Aguas" />
                                    <telerik:RadMenuItem Text="Entre Olas" />
                                    <telerik:RadMenuItem Text="Gorrion" />
                                    <telerik:RadMenuItem Text="Granada" />
                                    <telerik:RadMenuItem Text="Haloo Helsinki" />
                                    <telerik:RadMenuItem Text="Nobody's Listening" />
                                    <telerik:RadMenuItem Text="Rosenrot" />
                                    <telerik:RadMenuItem Text="Svend Herlufsens Ord" />
                                    <telerik:RadMenuItem Text="The Decline" />
                                    <telerik:RadMenuItem Text="When I Was A Boy" />
                                    <telerik:RadMenuItem Text="Your Shining Eyes" />
             </Items>
             </telerik:RadMenuItem>
             <telerik:RadMenuItem Text="Albums">
                                <Items>
                                    <telerik:RadMenuItem
                                        Image="images/albums/hypnotize.gif"
                                        Title="Hypnotize"
                                        Artist="System Of A Down" />
                                    <telerik:RadMenuItem
                                        Image="images/albums/mezmerize.gif"
                                        Title="Mezmerize"
                                        Artist="System Of A Down" />
                                    <telerik:RadMenuItem
                                        Image="images/albums/steal-this-album.gif"
                                        Title="Steal This Album"
                                        Artist="System Of A Down" />
                                    <telerik:RadMenuItem
                                        Image="images/albums/system-of-a-down.gif"
                                        Title="System Of A Down"
                                        Artist="System Of A Down" />
                                    <telerik:RadMenuItem
                                        Image="images/albums/toxicity.gif"
                                        Title="Toxicity"
                                        Artist="System Of A Down" />
                                </Items>
             </telerik:RadMenuItem>
             <telerik:RadMenuItem Text="Audiobooks" />
             <telerik:RadMenuItem Text="Compilations" />
             <telerik:RadMenuItem Text="Composers" />
             </Items>
             </telerik:RadMenu>
             </div>
             </div>
            </div>
            
            <script type="text/javascript" src="iPodRadMenu.js"></script>
            
            <script type="text/javascript">
                var iPodMenu1 = null;
                
                function pageLoad ()
                {
                    var RadMenu1 = $find('<%= RadMenu1.ClientID %>');
                    iPodMenu1 = new iPodMenu(RadMenu1);
                    if ($telerik.$('.OrientationVertical').length)
                        iPodMenu1.changeOrientation('Vertical');
                    else
                        iPodMenu1.changeOrientation('Horizontal');
                }
            </script>
            
            <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