Slightly Transparent Menu Backgrounds?

Poster: follicle
Dated: Thursday February 26 2009 - 14:57:10 GMT

Okay, this one might be difficult, but it's an effect I'd really like to achieve. I know how to make the submenus' backgrounds completely transparent, but is there a way to add a background color and make it only somewhat transparent with a percentage value? This way the main page content isn't completely obstructed by the dropdown menus, yet the submenu content can still be read.

Any insights would be greatly appreciated. Thanks!

Re: Slightly Transparent Menu Backgrounds?

Poster: Ruth
Dated: Thursday February 26 2009 - 23:13:36 GMT

Hi,

Yes, you can do that. In the style section for the particular submenu you can set the overfilter for the alpha tranparency this makes the menu background get more transparent, except this only applies to IE since the filters are proprietary to Microsoft. Now, if you want to do it for all browsers you would need to set it in css. Create a class in your style sheet or in the head of each page using the menu, for example



The first is I believe for Safari, the second is ie and the last is of course mozilla. opacity and -moz-opacity code from 0-1 in fractions, so you could have - .1, .2, .3 etc. So, .5 is equal to 50%. I would suggest you leave out the filter: alpha and just code that in the overfilter section of the menu setting the opacity at the percentage you want.

There are some things to note. In IE when applying the overfilter the background is what becomes transparent based on your pecentage, but in FF and other browsers that read the css it seems that the 'transparency' applies to everything including text so you need to be careful of how much transparency you apply if you want people to read the text

Now, to apply this, you would add offclass="opaque"; onclass="opaque"; in the style for the menus you want to show this transparency. Hope this helps.

Ruth