TRANSPARENT MENU

[Dave Navarro]

Hello,

I was wondering if there is a way to setup a radMenu to be 'transparent'?

I've got a client who would like to see an underlying image behind the menu as the image control transitions through a series of images. Of course the radMenu doesn't cover the entire image, only part of it, so most of the image is clearly visible as it transitions.

Please let me know if this is possible.

Many thanks in advance,

Dave

[T. Tsonev]

Hello David,

You can make the menu items transparent (60%) by applying the following style:

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

Also be sure to specify EnableOverlay="false". Depending on the skin, you might need further adjustments to the menu skin. Let us know how it goes.

Best wishes,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Dave Navarro]

Thanks, that did the trick! Is this feature documented somewhere?

I looked around and didn't find anything. Perhaps I was searching for the wrong word?

I'll check again. Now that I've got that working I'd like to read up on the subject so I can make additional changes.

Thanks again!

Dave

[T. Tsonev]

Hi David,

You are correct, this is not part of the documentation. We were about to include it as a KB article, but we have uncovered a problem with this approach.

After some further testing and it seems that this is not a perfect solution. Currently the menu will not expand under IE because of the filter setting that clips the sub-menus. You should remove the "filter: alpha(opacity=60);" to avoid that. I am afraid that the closest workaround is to use transparent PNGs for background images, but this will not work under IE6.

Greetings,
Tsvetomir Tsonev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dave Navarro]

Hello,

Thanks for the update. That's too bad it doesn't work... it seems like the code is so close and it seems like a nice feature.

In hind sight, I've only been asked for a transparent menu once so maybe it's not a widely used practice.

In any case, thanks for your help and suggestions to use transparent GIF's.

I'll give it a try and move on...

Thanks again!

Dave

[Hector]

Is there any update on using a transparent background for the Rad Menu?  I changed the menu sprite to a transparent background, but it still displays with a gray background.  Any help?

[Kamen Bundev]

Hi Hector,

Depends on the browser you are using. IE6 doesn't support 24bit PNG images, so it will render the transparency as opaque. The other IE browsers will render 24bit PNG images but if you apply any filter the transparency will break and render as black. Filters are known to break even the ClearType alpha, so use them with care.

Can you open a support ticket with more detailed explanation of your required RadMenu look plus the accompanying skin and sprites and we will do our best to help you achieve it.

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.

[Hector]

Thanks for the update,  Kamen.  I created an 8 bit PNG for the sprite, are we suppose to use 24 bit?  I will try that because I am using IE8 and is displaying with the gray menu.  I will open a support ticket like you suggested.  Thanks again.

[Kamen Bundev]

Hello Hector,

8bit PNG images support two kinds of transparency - index (which is only 100%) and alpha. Index transparency is what most image editors export and I guess you are using that and your transparency is exported as entirely opaque pixels. You can't do semi-transparency with index transparency (unless you use filters or opacity but they are not part of the image).

Of the big image editors only Adobe Fireworks supports 8bit+Alpha format export, though you can convert 24bit PNGs to 8bit+Alpha PNGs with several freely available tools. 8bit+Alpha is supported by all browsers except IE6 but contrary to the 24bit PNGs which are rendered entirely opaque where the alpha resides, the alpha channel in 8bit+Alpha PNGs is rendered entirely transparent in IE6 which makes it better alternative when you want to support IE6 at least partially.

Sincerely yours,
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.