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

RADMenu Similar to RadToolbar

6 Answers 157 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Suraj
Top achievements
Rank 1
Suraj asked on 22 Feb 2012, 05:08 PM
Is there a way to get the same look and feel of radtoolbar for the first level of menu items? What I mean is to have Images on the top of text with proper alignment. In the drop downs I can live with images on the side. I saw a reply to similar question in the thread http://www.telerik.com/community/forums/aspnet/toolbar/radtoolbar-dopdown-menu.aspx. This fix will not work for me. What I really want to achieve is posted in the picture

Suraj

6 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 27 Feb 2012, 11:59 AM
Hi Suraj,

In general the appearance that you need can be achieved using css class properties and classes - you can increase the width and height of the menu items and apply different background-image. Here you can refer to more detailed information on the different css classes that are applied to the Radmenu control. Please keep in mind that this is a very custom scenario that we currently do not provide support for.

All the best,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Suraj
Top achievements
Rank 1
answered on 27 Feb 2012, 10:46 PM
Hello Kate,
The URL you mentioned is not working. Can you provide me with the correct URL?
Regards
Suraj
0
Kate
Telerik team
answered on 28 Feb 2012, 09:25 AM
Hello Suraj,

Below you can find the correct url:
http://www.telerik.com/help/aspnet-ajax/menu-appearance-css-selectors.html

Greetings,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Suraj
Top achievements
Rank 1
answered on 01 Mar 2012, 06:38 PM
Thanks for the url it was very helpful. I was able to mimic most of the parts except some few issues. I would like to get the separator working correctly. As you can see in the attached demo the separator is shown only half way thru. Let me know if you can help me with this issue.

Please find the attachment for the demo project.

Oh I am unable to attach project files. Is there a possibility that I can email you the files?
Suraj
0
Suraj
Top achievements
Rank 1
answered on 01 Mar 2012, 09:41 PM
Hello
Please see the code below which I have used mentioned in the previous post. You may want to put the pngs to menu directory or change the path appropriately.
One more thing to note is if I use a skin everything will get distorted. I am not sure why this happens
Let me know what you find
Regards
Suraj

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <head id="Head1" runat="server">
        <title>
            Telerik Menu Sample
        </title>
        <style type="text/css">
            body {
            background-image:url(menu/PageBg.png);
            }
            html, body {
            height:100%;
            margin: 0;
            padding: 0;
            border: none;
            text-align: center;
            }
            #tblPrismMain {
 
            margin: 0 auto;
            text-align: left;
            vertical-align: middle;
            width: 100%;
 
            }
            .divMenu
            {
            width:99.5%;height:60px;
            margin-left:3px;
            background-image:url(menu/bg.png);
            }
 
            .divFooter
            {
            width:99.5%;height:20px;
            margin-left:3px;
            background-image:url(menu/bg.png);
            }
            .divContent
            {
            width:99%;
            background-color:#e4e9fd;
            margin-left:5px;
            overflow-y:auto;
            }
 
 
        </style>
        <style  type="text/css">
            .radMenuItem1
            {
            font-family:Tahoma !important;
            font-size:11px !important;
            font-weight:normal !important;
            }
            a.radMenuItem1 span.rmText
            {
            display: block;
 
            margin-left: 0px;
            margin-top: 0px;
            position: relative;
            width: 0;
            z-index: 1;
            }
        </style>
         
        <style type="text/css">
 
            div.RadMenu_Office2007Big
            {
            padding:18 0 0 0;
            text-align:right;
            }
            .myClass .rmText
            {
            font-family:Tahoma !important;
            font-size:11px !important;
            line-height:normal !important;
            font-variant:normal !important;
            text-align:center  !important;
            padding-top:0 !important;
            padding-bottom:0 !important;
            padding-left:2px !important;
            padding-right:2px !important;
            display:block !important;
            float:none !important;
            }
            .myClass .rmLeftImage
            {
            text-align:center !important;
            margin-left:auto !important;
            margin-right:auto !important;
            margin-top:0px !important;
            padding-bottom:0px  !important;
            line-height:0px !important;
            display:block !important;
            float:none !important;
            }
            .rmItem rmSeparator
            {
            height:40px !important;
            }
            .radMenuSeparator
            {
            padding-left:1px !important;
            background-color:Gray !important;
            width:1px !important;
            background-image:url(menu/bg.png) !important;
            height:50px !important;
            }
        </style>
        <script>
                    function setContentWidth()
                    {
                    var bodyHeight = document.body.offsetHeight;
                    document.all("tblPrismMain").height = bodyHeight;
            var trContentHeight = document.all("trContent").offsetHeight - 30;
            document.getElementById("divPrismContent").style.height = trContentHeight + "px";
            }
        </script>
    </head>
    <body onload="setContentWidth()">
        <form id="form1" runat="server">
            <asp:ScriptManager ID="sc" runat="server"></asp:ScriptManager>
            <table id="tblPrismMain" cellpadding="0" cellspacing="0"  border=0>
                <tr>
                    <td>
                        <div id="backgrounds" runat="server" class="divMenu">
                            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="right">
                                <tr>
 
                                    <td >
                                        <table align="right" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td style="padding-right:50px;padding-top:6px;">
                                                    <telerik:RadMenu ID="radMenu" runat="server" Visible="true" Font-Names="Tahoma" Font-Size="11px"  CssClass="Office2007RootItem"  ClickToOpen="true" EnableOverlay="true" EnableShadows="true">
 
                                                        <Items>
                                                            <telerik:RadMenuItem Text="Dashboard"  ImageUrl="menu\dash.png" AccessKey="P" CssClass="myClass"  BorderWidth=0>
                                                                <Items>
                                                                    <telerik:RadMenuItem Text="Procedure" runat="server"></telerik:RadMenuItem>
                                                                </Items>
                                                            </telerik:RadMenuItem>
                                                            <telerik:RadMenuItem IsSeparator="true" CssClass="radMenuSeparator"  Visible="false"></telerik:RadMenuItem>
                                                            <telerik:RadMenuItem Text="Procedure"  ImageUrl="menu\Procedures.png"  CssClass="myClass" Width="60px">
                                                                <Items>
                                                                    <telerik:RadMenuItem Text="Procedure" runat="server"></telerik:RadMenuItem>
                                                                </Items>
                                                            </telerik:RadMenuItem>
                                                        </Items>
                                                    </telerik:RadMenu>
 
                                                </td>
                                            </tr>
                                        </table>
                                        <telerik:RadToolBar ID="RadToolBar1" runat="server"     skin="Web20"  EnableRoundedCorners="true" EnableShadows="true" Visible="false">
                                            <Items>
                                                <telerik:RadToolBarButton CssClass="CustomItem"   Text="Dashboard" AccessKey ="D"  ImageUrl="menu\dash.png"  ImagePosition="AboveText"  ></telerik:RadToolBarButton>
                                                <telerik:RadToolBarButton IsSeparator="true" Visible="false"></telerik:RadToolBarButton>
                                                <telerik:RadToolBarButton CssClass="CustomItem" Text="Procedure" AccessKey="P" ImageUrl="menu\Procedures.png"  ImagePosition="AboveText" ></telerik:RadToolBarButton>
                                            </Items>
                                        </telerik:RadToolBar>
 
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr id="trContent" height="100%">
                    <td>
                        <div id="divPrismContent" runat="server" class="divContent">dd</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="PrismFooter" runat="server" class="divFooter"></div>
                    </td>
                </tr>
            </table>
            <asp:RoundedCornersExtender ID="rce" runat="server"
                                                                    TargetControlID="backgrounds"
                                                                    Radius="50"
                                                                    Corners="BottomLeft,BottomRight" BorderColor="Black"  />
            <asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
                                                                    TargetControlID="PrismFooter"
                                                                    Radius="50"
                                                                    Corners="All" BorderColor="Black"  />
            <asp:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server"
                                                                    TargetControlID="divPrismContent"
                                                                    Radius="20"
                                                                    Corners="All" BorderColor="Black"  />
        </form>
    </body>
</html>
0
Kate
Telerik team
answered on 06 Mar 2012, 02:36 PM
Hello Suraj,

In order for the separator to appear as expected you will also need to alter the sprite image that is applied to the RadMenu control. Please refer to the below article where it is explained in details how to achieve that:
http://www.telerik.com/help/aspnet-ajax/menu-appearance-creating-custom-skins-sprite.html

Regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Menu
Asked by
Suraj
Top achievements
Rank 1
Answers by
Kate
Telerik team
Suraj
Top achievements
Rank 1
Share this question
or