How the RadMenu's arrows replace with css?

[Esra]

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

[Aneliya Petkova]

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

 

 

[Esra]

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

Thanks

[Magdalena]

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

 

 

[Esra]

Thank you very much.

Good Work.

[Esra]

Hello Aneliya,

Your reference to a vertical menu I've applied to 'html .RadMenu .rmVertical .rmRootLink .rmIcon'  but not display.

[Magdalena]

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

 

 

[Esra]

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

Regards,
Esra