Menu left image css

9 posts, 0 answers
  1. Don
    Don avatar
    8 posts
    Member since:
    May 2009

    Posted 14 Feb 2011 Link to this post

    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
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Feb 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 13 Jul 2012 Link to this post

    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
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Jul 2012 Link to this post

    Hello,

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

    Hope this helps.

    Thanks,
    Princy.
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Jul 2012 Link to this post

    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.
  7. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 13 Jul 2012 Link to this post

    Thanks!

    I was using .RadMenuItemCssClass.rmtext instead of .RadMenuItemCssClass .rmLeftImage in my CSS
  8. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 13 Jul 2012 Link to this post

    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
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Jul 2012 Link to this post

    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.
  10. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 18 Jul 2012 Link to this post

    Exactly what I needed. Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017