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>