This is a migrated thread and some comments may be shown as answers.

RadMenuItem icons via CSS?

3 Answers 205 Views
Menu
This is a migrated thread and some comments may be shown as answers.
rwozniak
Top achievements
Rank 1
rwozniak asked on 11 Jul 2008, 01:57 PM
Is there any way to generate the menu item icons (the image icons associated with each menu item) with CSS instead of using the ImageUrl property?

With this release the number of resources (images, css, etc.) in my pages have dropped dramatically, which is great, but I still have a bunch of individual images coming down to support my menus and context menus.

I'd like to use CSS sprites and have all of these images in a single file, but haven't been able to figure out a way to achieve this. The RadMenuItem does have a CssClass property, but that controls the CSS class of the entire item, not the 'img' tag (I forget whether it is applied to the 'li' or the 'a' tag).

It would be great if it had a property like 'ImageCSSClass' that when set, adds an additional class to the img tag, so it would look something like this:

<img class="rmLeftImage MyCutIconCssClass" alt="" />

I could then assign a background image to that CSS class and assign the appropriate coordinates from my image sprite.

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 15 Jul 2008, 07:40 AM
Hi rwozniak,

There are two ways to use sprites with the RadMenu for ASP.NET AJAX:
  1. Use the CssClass property and set the background of the rmText element, e.g.
    .myCustomCssClass .rmText 
        backgroundtransparent url('sprite.gif'no-repeat 0 0; 
  2. use Item Templates where you can specify the markup in whatever way you like. In fact, a similar approach is used in the Custom attributes example for RadComboBox.
While the first solution is simple and more robust, it depends heavily on the skin you have chosen, since some of the RadMenu skins use the rmText elements (to attach rounded corner backgrounds, etc.).

And just a side-note: when creating the sprite, I recommend to create it vertical (this way the maximum wasted space will be the height of the items).
Best wishes,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
rwozniak
Top achievements
Rank 1
answered on 17 Jul 2008, 01:12 PM
Thanks very much...I think the first method will fit the bill.

Ross
0
bob ter
Top achievements
Rank 1
answered on 02 Feb 2010, 01:10 PM
Hi,

I'm trying to implement the CSS method you have described here but I'm having trouble. First off I'm still using Q3 2008 controls.

I've included -

.myCustomCssClass .rmText
{
    background: transparent url('../../Resources/Images/sprite.gif') no-repeat 0 0;
}

in my css file and ive put 'rmtext' in the menu item against the 'cssClass' option. Is this correct as I'm only seeing a white space



Tags
Menu
Asked by
rwozniak
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
rwozniak
Top achievements
Rank 1
bob ter
Top achievements
Rank 1
Share this question
or