By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Dynamic pulldown menu semi-transparent?

P: n/a
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?
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a

"jhomp ssens" <ph********@hotmail.com> wrote in message
news:4f**************************@posting.google.c om...
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?


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
Jul 20 '05 #2

P: n/a
On Tue, 6 Apr 2004 01:25:38 -0400, Jim Roberts <jr******@msn.com> wrote:
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.


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.
Jul 20 '05 #3

P: n/a

"Neal" <ne*****@spamrcn.com> wrote in message
news:op**************@news.rcn.com...
On Tue, 6 Apr 2004 01:25:38 -0400, Jim Roberts <jr******@msn.com> wrote:
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.
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.


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
Jul 20 '05 #4

P: n/a

"Jim Roberts" wrote in message
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.


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
Jul 20 '05 #5

P: n/a
Jim Roberts wrote:
Another problem is IE does not support png transparency.


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.
Jul 20 '05 #6

P: n/a

"Berislav Lopac" <be************@dimedia.hr> wrote in message
news:c4**********@ls219.htnet.hr...
Jim Roberts wrote:
Another problem is IE does not support png transparency.


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.

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
Jul 20 '05 #7

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

<div id="Layer1" style="position:absolute; Filter: Alpha(Opacity=60, FinishOpacity=50, 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.
Jun 20 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.