Menu left image css

[Don]

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

[Kate]

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

[Martin Roussel]

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

[Princy]

Hello,

Please take a look into this link which provides information about working with sprite images.

Hope this helps.

Thanks,
Princy.

[Kate]

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

[Martin Roussel]

Thanks!

I was using .RadMenuItemCssClass.rmtext instead of .RadMenuItemCssClass .rmLeftImage in my CSS

[Martin Roussel]

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:

<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;
} 

TIA

[Kate]

Hi Martin,

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

[Martin Roussel]

Exactly what I needed. Thanks!