Dynamic pulldown menu semi-transparent?

[jhomp ssens]

I would like to create a pulldown menu which is
semi-transparent.... that is, you can see the text and graphics behind
it when it is pulled down. The effect I'm looking for can be seen at
http://www.countrywide.com. Are there any good tutorials which can
show me how to do this with CSS?

[Jim Roberts]

Re: Dynamic pulldown menu semi-transparent?


"jhomp ssens" <phoenix121@hot mail.com> wrote in message
news:4fa82098.0 404052040.18c30 4d6@posting.goo gle.com...[color=blue]
> I would like to create a pulldown menu which is
> semi-transparent.... that is, you can see the text and graphics behind
> it when it is pulled down. The effect I'm looking for can be seen at
> http://www.countrywide.com. Are there any good tutorials which can
> show me how to do this with CSS?[/color]

They are using javascript for those menus. They were not transparent in
Firefox .8 but were in IE6.

See http://www.meyerweb.com/eric/css/edge/.

The problem is these techniques will not work with internet explorer. They
depend on the being able to apply hover styles on arbitrary elements. IE
only supports :hover on the 'a' element.

I do not believe there is a way to do it with CSS that will work with IE.

Another problem is IE does not support png transparency. You could make
menus using CSS and apply a semi-transparent png image as a background, with
the background-color set at transparent. This would work for Mozilla, for
instance but not IE. A crude work around for a semi-transparent background
in IE would be to use a gif which has alternating color and transparent
pixels.But then your stuck anyway because the menus won't work in IE.

You might try google to see if there are any work-arounds for these
problems.

Regards,
Jim

[Neal]

Re: Dynamic pulldown menu semi-transparent?

On Tue, 6 Apr 2004 01:25:38 -0400, Jim Roberts <jrzycrim@msn.c om> wrote:
[color=blue]
> The problem is these techniques will not work with internet explorer.
> They
> depend on the being able to apply hover styles on arbitrary elements. IE
> only supports :hover on the 'a' element.
>
> I do not believe there is a way to do it with CSS that will work with IE.[/color]

A List Apart has an article "Suckerfish Dropdowns" which demonstrates an
almost pure CSS implementation. Of course, IE requires Javascript, but not
much is needed. The IE users w/o Js are left out, though, so have a backup
navigation system for them to use - ie a site map or text links on the
page.

[Jim Roberts]

Re: Dynamic pulldown menu semi-transparent?


"Neal" <neal413@spamrc n.com> wrote in message
news:opr50tajr2 dvhyks@news.rcn .com...[color=blue]
> On Tue, 6 Apr 2004 01:25:38 -0400, Jim Roberts <jrzycrim@msn.c om> wrote:
>[color=green]
> > The problem is these techniques will not work with internet explorer.
> > They
> > depend on the being able to apply hover styles on arbitrary elements. IE
> > only supports :hover on the 'a' element.
> >
> > I do not believe there is a way to do it with CSS that will work with[/color][/color]
IE.[color=blue]
>
> A List Apart has an article "Suckerfish Dropdowns" which demonstrates an
> almost pure CSS implementation. Of course, IE requires Javascript, but not
> much is needed. The IE users w/o Js are left out, though, so have a backup
> navigation system for them to use - ie a site map or text links on the
> page.[/color]

http://www.alistapart.com/articles/dropdowns/

Thanks for the info. I might play around with that for fun. That combined
with a semi-transparent gif (as I mentioned earlier) will probably get you
as close to what jhomp ssens is looking for.

Regards,
Jim

[Jim Roberts]

Re: Dynamic pulldown menu semi-transparent?


"Jim Roberts" wrote in message
[color=blue]
> Thanks for the info. I might play around with that for fun. That combined
> with a semi-transparent gif (as I mentioned earlier) will probably get you
> as close to what jhomp ssens is looking for.[/color]

sorry for not editing out the previous posts better. It's late here...

I mean to say that will get you as close as you are likely to get without
using full blown javascript.

Jim

[Berislav Lopac]

Re: Dynamic pulldown menu semi-transparent?

Jim Roberts wrote:[color=blue]
> Another problem is IE does not support png transparency.[/color]

Sure it does: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Berislav

--
If the Internet is a Marx Brothers movie, and Web, e-mail, and IRC are
Groucho, Chico, and Harpo, then Usenet is Zeppo.

[Jim Roberts]

Re: Dynamic pulldown menu semi-transparent?


"Berislav Lopac" <berislav.lopac @dimedia.hr> wrote in message
news:c4tos3$mle $1@ls219.htnet. hr...[color=blue]
> Jim Roberts wrote:[color=green]
> > Another problem is IE does not support png transparency.[/color]
>
> Sure it does: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
>
> Berislav
>
> --
> If the Internet is a Marx Brothers movie, and Web, e-mail, and IRC are
> Groucho, Chico, and Harpo, then Usenet is Zeppo.
>
>[/color]
One, it's a shame that you have to resort to a script just to display an
image. Two,
if you can get a transparent png to display properly as a background image
for any element, I'll eat my words.

Regards,
Jim

[Freeform]

You may want to use the css alpha filter function on the divs.

<div id="Layer1" style="position :absolute; Filter: Alpha(Opacity=6 0, FinishOpacity=5 0, Style=1); left: 118px; top: 31px; width: 390px; height: 223px; background-color: #0066CC; layer-background-color: #0066CC; border: 1px none #000000;">
<div></div>
</div>
<div id="Layer2" style="position :absolute; width:200px; height:115px; z-index:1; left: 120px; top: 33px;">Position another div over top of it without the alpha filter for readable text.</div>

might work.