How the RadMenu's arrows replace with css?

8 posts, 1 answers
  1. Esra
    Esra avatar
    5 posts
    Member since:
    Dec 2013

    Posted 23 Jun 2014 Link to this post

    Hi,

    I have bind Radmenu using SqlDataSource but  I could not edit menu of the visual part.
    How do I adjust the arrow with css if you could help?

    King Regards
    Esra
  2. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 24 Jun 2014 Link to this post

    Hello Esra,

    There are expand arrow classes that are added to the .rmText element in all RadMenu levels, including root. The classes are : .rmExpandRight, .rmExpandLeft, .rmExpandBottom and .rmExpandTop. You could use them to specify the arrow image via the background CSS attribute.
    Please check the following help articles with the table that lists CSS Skin File Selectors:
    http://www.telerik.com/help/aspnet-ajax/menu-appearance-css-selectors.html

    Regards,
    Aneliya Petkova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     

  3. Esra
    Esra avatar
    5 posts
    Member since:
    Dec 2013

    Posted 24 Jun 2014 in reply to Aneliya Petkova Link to this post

    I've viewed the page you suggested earlier. I've done the experiment described on page but didn't. Can you give examples?

    Thanks
  4. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Jun 2014 Link to this post

    Hello Esra,

    Everything depends on what exactly you need to customize and on which element. Please explain to us in more details the style you need to change.
    I made a simple project for you showing how you could change expand arrows on Root RadMenu items, using Classic Render mode, sprite image and ShowToggleHandle property is set on the menu.If you need to change the arrows on the sub menu items, the easiest way to do that is to use Lightweight render mode. Please inspect the project and let me know if this works for you.

    Regards,
    Aneliya Petkova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Esra
    Esra avatar
    5 posts
    Member since:
    Dec 2013

    Posted 30 Jun 2014 in reply to Magdalena Link to this post

    Thank you very much.

    Good Work.
  6. Esra
    Esra avatar
    5 posts
    Member since:
    Dec 2013

    Posted 05 Jul 2014 Link to this post

    Hello Aneliya,

    Your reference to a vertical menu I've applied to 'html .RadMenu .rmVertical .rmRootLink .rmIcon'  but not display.
  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 09 Jul 2014 Link to this post

    Hello Esra,

    RadMenu in classic render mode uses a background sprite image for hover effect because of rounded corners and supported the control in old browsers as well. The expand arrow in vertical Menu is on the same image as a hover effect. So if you would like to change the arrow, it is necessary to create custom sprite with all states of all items (root items and sub-items) as well. Because of this we would like to recommend you to use lightweight render mode for this purpose. In lightweight render mode are used font icons for expand arrows and this makes the customization much more easier. Please, find an exemplar solution in the attachment.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Esra
    Esra avatar
    5 posts
    Member since:
    Dec 2013

    Posted 09 Jul 2014 in reply to Magdalena Link to this post

    Thank you for the example you gave. It was enough only  to change rendering mode for I wanted.

    Regards,
    Esra
Back to Top