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" %>
<%@ 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
>