I want to create a sprite to use with the left menu item image, there is no class for left menu image or left menu image hover. Now I can add a image with image url property but i have 35 links and thus 35 calls to the server for the individual left menu items images alone. I would like to reduce that to one call to a sprite for all left menu items using css.
How can this be done?
Thanks
Don
How can this be done?
Thanks
Don
8 Answers, 1 is accepted
0
Hi Don,
Since the release of Q1 2010, RadMenu supports such functionality, which is actually a property called EnableImageSprites . Here is more explanation about that.
Greetings,
Kate
the Telerik team
Since the release of Q1 2010, RadMenu supports such functionality, which is actually a property called EnableImageSprites . Here is more explanation about that.
Greetings,
Kate
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Martin Roussel
Top achievements
Rank 1
answered on 13 Jul 2012, 01:13 PM
Kate,
Your link seems to be not working anymore. Can you please provide the correct one, or reference to new link if this is not valid anymore (since it dates from Feb 15, 2011). Im trying to make sprites work in my RadMenu item icons.
TIA
Your link seems to be not working anymore. Can you please provide the correct one, or reference to new link if this is not valid anymore (since it dates from Feb 15, 2011). Im trying to make sprites work in my RadMenu item icons.
TIA
0
0
Hi Martin,
Here is the link from the above post :
http://www.telerik.com/help/aspnet-ajax/menu-appearance-item-images.html
Kind regards,
Kate
the Telerik team
Here is the link from the above post :
http://www.telerik.com/help/aspnet-ajax/menu-appearance-item-images.html
Kind 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.
0
Martin Roussel
Top achievements
Rank 1
answered on 13 Jul 2012, 02:19 PM
Thanks!
I was using .RadMenuItemCssClass.rmtext instead of .RadMenuItemCssClass .rmLeftImage in my CSS
I was using .RadMenuItemCssClass.rmtext instead of .RadMenuItemCssClass .rmLeftImage in my CSS
0
Martin Roussel
Top achievements
Rank 1
answered on 13 Jul 2012, 02:56 PM
One small issue im facing with this is my images are cropped in my menu (look at attachment). Since Height and Width in CSS dont seem to work, Is there a way to define the image size?
Here are the snippets:
TIA
Here are the snippets:
<
telerik:RadMenu
CollapseAnimation-Type
=
"None"
ID
=
"RadMenu2"
runat
=
"server"
EnableImageSprites
=
"true"
EnableRoundedCorners
=
"true"
EnableShadows
=
"true"
CssClass
=
"menu3"
OnItemClick
=
"RadMenu2_ItemClick"
Width
=
"90%"
Flow
=
"Vertical"
BackColor
=
"#f3f5f5"
BorderStyle
=
"None"
ForeColor
=
"Black"
>
</
telerik:RadMenu
>
RadMenuItem MenuItem = new RadMenuItem();
RadMenu2.Items.Add(MenuItem);
MenuItem.Text = "List";
MenuItem.Value = "List.aspx";
MenuItem.CssClass = "ListItem";
MenuItem.Height = 50;
MenuItem = new RadMenuItem();
RadMenu2.Items.Add(MenuItem);
MenuItem.Text = "Test";
MenuItem.Value = "Test.aspx";
MenuItem.CssClass = "TestItem";
MenuItem.Height = 50;
MenuItem = new RadMenuItem();
RadMenu2.Items.Add(MenuItem);
MenuItem.Text = "Other";
MenuItem.Value = "";
MenuItem.CssClass = "OtherItem";
MenuItem.Height = 50;
div.menu3
{
background-color: #f3f5f5;
/*text-align:center;*/
padding: 20px 10px;
}
.menu3 .rmLeftImage
{
background: transparent url("/Images/qsfLayout-Q2-2012.png") no-repeat 0 0;
margin: 0;
padding: 0;
width:50px;
}
.ListItem .rmLeftImage
{
background-position: -180px -200px;
}
.TestItem .rmLeftImage
{
background-position: -240px -200px
}
.OtherItem .rmLeftImage
{
background-position: -270px -200px;
}
{
background-color: #f3f5f5;
/*text-align:center;*/
padding: 20px 10px;
}
.menu3 .rmLeftImage
{
background: transparent url("/Images/qsfLayout-Q2-2012.png") no-repeat 0 0;
margin: 0;
padding: 0;
width:50px;
}
.ListItem .rmLeftImage
{
background-position: -180px -200px;
}
.TestItem .rmLeftImage
{
background-position: -240px -200px
}
.OtherItem .rmLeftImage
{
background-position: -270px -200px;
}
TIA
0
Hi Martin,
Using the css class selector below you can easily adjust the height and width of the left image:
Regards,
Kate
the Telerik team
Using the css class selector below you can easily adjust the height and width of the left image:
div.RadMenu span.rmLeftImage
{
height
:
30px
;
width
:
38px
;
}
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 18 Jul 2012, 11:18 AM
Exactly what I needed. Thanks!