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

Menu left image css

8 Answers 157 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Don
Top achievements
Rank 2
Don asked on 14 Feb 2011, 02:55 PM
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

8 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 15 Feb 2011, 10:23 AM
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
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
0
Princy
Top achievements
Rank 2
answered on 13 Jul 2012, 01:40 PM
Hello,

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

Hope this helps.

Thanks,
Princy.
0
Kate
Telerik team
answered on 13 Jul 2012, 02:18 PM
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
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
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:

<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
0
Kate
Telerik team
answered on 18 Jul 2012, 08:54 AM
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
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!
Tags
Menu
Asked by
Don
Top achievements
Rank 2
Answers by
Kate
Telerik team
Martin Roussel
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or