Radmenu Semi-Transparency affect

[[e-mail]]

Hi - i'm using the latest Radmenu control and was wondering how you might be able to set the background transparency of the menu that opens up after you place the mouse over the top-most level.

So in essence when you move your mouse over the menu, the cascading menu has a nice semi-transparent look.

Thanks

[Schlurk]

This code will set the transparency of a RadMenuItem to 70%:

<style type="text/css">
    .rmItem
    {
        opacity: 0.7;
        -moz-opacity: 0.7;
        filter: alpha(opacity=70);
    }
</style>

Hopefully that does the trick :)

[rcba]

This didn't work for me in IE.  Instead I tried doing the same to the .rmGroup and .rmVertical and it works on all browsers but it does not work in IE7.  It does not show the children of the first tree nodes.

Does anyone know the solution?

Thanks,
RB

[Schlurk]

This website goes over how to implement opacity in all browsers. I believe if you are running into this issue only in IE7 you might be running in compatability mode and therefore you need to add a rule. You might also need to change the order of the CSS rules:

<style type="text/css">
    .rmItem
    {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=70);
        opacity: 0.7;
        -moz-opacity: 0.7;
    }
</style>

I think that should fix everything with your IE issues :)

[rcba]

Thank you for you reply.  I tried your suggestion but for some reason using .rmItem prevents IE from showing the radmenu at all.  Using .RadMenu_Custom .rmGroup, .RadMenu_Custom .rmGroup .rmVertical transparency works on all browsers but on IE7 still.
I've also tried setting back the opacity values if the browser is IE7 but it is not working either.

<style type="text/css">.RadMenu_Custom .rmGroup, .RadMenu_Custom .rmGroup .rmVertical {filter:alpha(opacity=90); opacity:.9; -moz-opacity:.9;}</style>

<!--[if lt IE 8 ]>

<style type="text/css">.RadMenu_Custom .rmGroup, .RadMenu_Custom .rmGroup .rmVertical { opacity:1; -moz-opacity:.1; filter:alpha(opacity=100); }</style>

<![endif]-->

Any other suggestions?

Thanks,
RB

[Kamen Bundev]

Hello rcba,

This issue may be related to the layout of your page, can you share a live URL or a sample project with these changes applied and we will try to help you fix it. I can convert this forum post to a support ticket if you prefer privacy. Thank you in advance.

Best wishes,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[sircutbreaker]

I am having the same issue.  I placed the filter to give the dropdown the transparency effect.. and now it doesnt show at all in ie.

here is a live url

http://multimediabyjeff.com/shop2/

any help would be much appreciated.

Regards,

Jeff

[Kamen Bundev]

Hello sircutbreaker,

The issue here is that .rmItem is stackable and when filters are stacked in IE, the results are unpredictable. The fix is easy - just apply the filter and opacity to the .rmLink element and remove the background from .rmItem in order to make the above transparency visible.

Kind regards,
Kamen Bundev
the Telerik team