RadMenuItem icons via CSS?

4 posts, 0 answers
  1. rwozniak
    rwozniak avatar
    47 posts
    Member since:
    Oct 2007

    Posted 11 Jul 2008 Link to this post

    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.
  2. Alex Gyoshev
    Alex Gyoshev avatar
    2527 posts

    Posted 15 Jul 2008 Link to this post

    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,
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. rwozniak
    rwozniak avatar
    47 posts
    Member since:
    Oct 2007

    Posted 17 Jul 2008 Link to this post

    Thanks very much...I think the first method will fit the bill.

  4. bob ter
    bob ter avatar
    14 posts
    Member since:
    Nov 2009

    Posted 02 Feb 2010 Link to this post


    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

Back to Top