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

Need explanation on radmenu with css sprites

2 Answers 92 Views
Menu
This is a migrated thread and some comments may be shown as answers.
FEST
Top achievements
Rank 1
FEST asked on 27 Jul 2011, 11:23 AM
Hi forum!

I would like some brief explanation how can i work with the css sprite for the radmenu button images. Currently im doing an image for each button (main and sub) and each one ias abou 2 kb witch is very bad i think. I know how css prite works (basic) and i would like to grab a 1px width image and fill the background of the items (radmenuitems) since i cant call the background-image and back-ground-repeat.

Also, i would like to know what is better in terms of performance to a website, use background-image with background-repeat and put the text as image or use background-image with background-repeat and use the normal radmenu text property (my problem here is that i can't find the font i want that is Microsoft Sans Serif that i use in photoshop)

Many thanks,
FEST

2 Answers, 1 is accepted

Sort by
0
Accepted
Kate
Telerik team
answered on 01 Aug 2011, 03:54 PM
Hi Fest,

You can fill the background of the RadMenu using a single image and apply a background-image, background-repeat and background-position properties so that the image can fill in the whole RadMenu. To achieve the desired effect, however, you will need to select the right css class selectors. For instance here is a start example how to apply background sprite image by using the right css class selectors to the root menu items:

div.RadMenu_Default .rmRootGroup,
div.RadMenu_Default a.rmLink,
div.RadMenu_Default .rmGroup .rmText,
div.RadMenu_Default .rmVertical .rmText,
div.RadMenu_Default .rmLeftArrow,
div.RadMenu_Default .rmRightArrow,
div.RadMenu_Default .rmTopArrow,
div.RadMenu_Default .rmBottomArrow {
    background-image: url("../Img/world.gif");
    background-position: 0 0;
    background-repeat: repeat-y;

Considering your second question if you need to have a better performance I would suggest that you avoid setting background image to the different items and instead use the Text property. However, since the RadMenu is a light control, there should not be very significant difference in terms of performance if you decide to use images. 

Kind regards,
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
FEST
Top achievements
Rank 1
answered on 05 Aug 2011, 11:00 AM
HI Admin!

Many thanks for the answer it helped a lot, untill now i could only put one image trough the Cssclass and i was using the back image and repat and for the text i used the radmenu's one but with that solution i can put more images. Many thanks again.

FEST
Tags
Menu
Asked by
FEST
Top achievements
Rank 1
Answers by
Kate
Telerik team
FEST
Top achievements
Rank 1
Share this question
or