Pretty neat drop-down menu

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Kerberos - 30 Dec 2004 16:23 GMT

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...

Signature

Kerberos.

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

Reply to this Message

Dave Sisley - 30 Dec 2004 18:28 GMT

> 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
[quoted text clipped - 13 lines]
> 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.

Signature

Dave Sisley
dsisley@sonic.net
roth-sisley.net

Reply to this Message

Harlan Messinger - 30 Dec 2004 19:16 GMT

> 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:
>
[quoted text clipped - 17 lines]
>
> 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.

Reply to this Message

Dave Sisley - 30 Dec 2004 20:16 GMT

>> 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
[quoted text clipped - 3 lines]
> 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:
>>
[quoted text clipped - 20 lines]
> 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.

Signature

Dave Sisley
dsisley@sonic.net
roth-sisley.net

Reply to this Message

Michael Rozdoba - 31 Dec 2004 07:34 GMT

>>It doesn't avoid Javascript. That's what csshover.htc is coded in. No
>>Javascript, no behaviors.
[quoted text clipped - 4 lines]
> 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?

Signature

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2004

Pretty neat drop-down menu