Pretty neat drop-down menu

Check it out here: http://www.amazon.com pass your mouse over the top tab
"SEE ALL 31 Product Categories" and see the nice menu. Is there a way to
do it easily with CSS? I checked out the code, and it's huge, and it uses
JavaScript.
I think it's basically 5 states:

1. Mouse over the tab
2. Fast transparent DIV with 50% width and height and an outline for nice
transition
3. Menu with all categories
4. On mouse out, again, fast transparent DIV with 50% width and height and
an outline for nice transition
5. End

I think it can work without the DOM on regular browsers, but it won't on
IE because the :hover pseudo class can be applied only to A tags.
Maybe there is a tutorial somewhere on the Internet...

--

Kerberos.

http://www.opera.com
http://www.freebsd.org
http://www.auriance.com
http://www.osresources.com
http://exodus.jabberstudio.org

Kerberos <me (AT) privacy (DOT) net> wrote:

Check it out here: http://www.amazon.com pass your mouse over the top tab
"SEE ALL 31 Product Categories" and see the nice menu. Is there a way to
do it easily with CSS? I checked out the code, and it's huge, and it uses
JavaScript.
I think it's basically 5 states:

1. Mouse over the tab
2. Fast transparent DIV with 50% width and height and an outline for nice
transition
3. Menu with all categories
4. On mouse out, again, fast transparent DIV with 50% width and height and
an outline for nice transition
5. End

I think it can work without the DOM on regular browsers, but it won't on
IE because the :hover pseudo class can be applied only to A tags.
Maybe there is a tutorial somewhere on the Internet...

Actually, there is a way to get IE to recognize the :hover
psuedo-class. (NOTE: I don't think I'm seeing the same amazon page as
you, so I'm not sure exactly what you're looking at...)

See this page for an explanation:

http://www.xs4all.nl/~peterned/csshover.html

I used the code provided here:

view-source:http://www.xs4all.nl/~peterned/htc/csshover.htc

for page on my site in order to get IE to use :hover on p elements:

http://roth-sisley.net/DaveStuff/index.html

[warning: the server is off at night (California time).]

I'll admit I don't understand exactly how it works, but by using it,
IE6 displays my page the same way firefox does. The one drawback is I
get an error when I validate the css:

"Property behavior doesn't exist : url(hover.htc)" (ha ha).

Perhaps you could use something similar and avoid the javascript.

-dave.

--
Dave Sisley
dsisley (AT) sonic (DOT) net
roth-sisley.net

"Dave Sisley" <dsisley (AT) sonic (DOT) net> wrote

Actually, there is a way to get IE to recognize the :hover
psuedo-class. (NOTE: I don't think I'm seeing the same amazon page as
you, so I'm not sure exactly what you're looking at...)

It doesn't get IE to recognize :hover. It goes through all the styles on the
page and *replaces* (some of) the ones that include :hover with a class name
that IE *will* recognize.

See this page for an explanation:

http://www.xs4all.nl/~peterned/csshover.html

I used the code provided here:

view-source:http://www.xs4all.nl/~peterned/htc/csshover.htc

for page on my site in order to get IE to use :hover on p elements:

http://roth-sisley.net/DaveStuff/index.html

[warning: the server is off at night (California time).]

I'll admit I don't understand exactly how it works, but by using it,
IE6 displays my page the same way firefox does. The one drawback is I
get an error when I validate the css:

"Property behavior doesn't exist : url(hover.htc)" (ha ha).

Perhaps you could use something similar and avoid the javascript.

It doesn't avoid Javascript. That's what csshover.htc is coded in. No
Javascript, no behaviors.

Harlan Messinger <h.messinger (AT) comcast (DOT) net> wrote:

"Dave Sisley" <dsisley (AT) sonic (DOT) net> wrote in message
news:xNXAd.15468$_3.179005 (AT) typhoon (DOT) sonic.net...

Actually, there is a way to get IE to recognize the :hover
psuedo-class. (NOTE: I don't think I'm seeing the same amazon page as
you, so I'm not sure exactly what you're looking at...)

It doesn't get IE to recognize :hover. It goes through all the styles on the
page and *replaces* (some of) the ones that include :hover with a class name
that IE *will* recognize.

Oh. Thanks for that. I (insanely) just installed the script and
linked to it from my stylesheet. It worked, and I was busy with other
stuff and never went back to see what it actually does.

See this page for an explanation:

http://www.xs4all.nl/~peterned/csshover.html

I used the code provided here:

view-source:http://www.xs4all.nl/~peterned/htc/csshover.htc

for page on my site in order to get IE to use :hover on p elements:

http://roth-sisley.net/DaveStuff/index.html

[warning: the server is off at night (California time).]

I'll admit I don't understand exactly how it works, but by using it,
IE6 displays my page the same way firefox does. The one drawback is I
get an error when I validate the css:

"Property behavior doesn't exist : url(hover.htc)" (ha ha).

Perhaps you could use something similar and avoid the javascript.

It doesn't avoid Javascript. That's what csshover.htc is coded in. No
Javascript, no behaviors.

Thanks again. I don't know javascript, which is why I try to avoid
using it. I should have realized, though. I need to experiment with
this little block of code on some other pages, but I like how easy it
was to implement. I guess what I avoided was having to write any
javascript *myself* (smiley).

-dave.


--
Dave Sisley
dsisley (AT) sonic (DOT) net
roth-sisley.net

Dave Sisley wrote:

Harlan Messinger <h.messinger (AT) comcast (DOT) net> wrote:

It doesn't avoid Javascript. That's what csshover.htc is coded in. No
Javascript, no behaviors.

Thanks again. I don't know javascript, which is why I try to avoid
using it. I should have realized, though. I need to experiment with
this little block of code on some other pages, but I like how easy it
was to implement. I guess what I avoided was having to write any
javascript *myself* (smiley).

More importantly, it keeps all the scripting in one place, rather than
having it scattered throughout ones markup & is a much prettier modular
solution as a result. Furthermore, the script is only ever used by IE
clients (who I, um, don't exactly have a lot of respect for - unless
they're being forced to use the wretched filth).

Given one almost always needs to support IE, this seems like as clean a
solution as one can get, whilst letting decent browsers work largely
unhindered by hideous IE hacks (just the one behaviour inclusion line
which they need to ignore).

I don't suppose there's a way to wrap that css line up such that the
resulting code still functions in IE but will also validate?

--
Michael
m r o z a t u k g a t e w a y d o t n e t