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
Suraj
6 Answers, 1 is accepted
0
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
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
The URL you mentioned is not working. Can you provide me with the correct URL?
Regards
Suraj
0
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
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
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" %>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
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
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.