Mitko Gerensky-Greene wrote:
I need help with the following:
I need to have 4 boxes on my page and upon hovering AND clicking on each, I
need to have a list of links (I suppose, residing in a div) show up below
the corresponding box.
Could anyone point me towards some code or tutorial explaining how to
accomplish that? Thanks in advance!
Well, I spent a few minutes playing with it. I have two renditions, one
of my own: <http://www.automatamedia.com/css-d/links.php>
And another, based on Thierry's CSS Pop Ups
(<http://www.tjkdesign.com/articles/css pop ups/1.asp>):
<http://www.automatamedia.com/css-d/links2.php>
They use CSS2 selectors and the :focus pseudo-element, mainly because
sticking an unordered or definition list (because that's what the links
are) within an anchor tag got me in trouble with the W3C validator; by
using a CSS2 adjacent sibling selector, I was able to keep them out of
the anchor itself. Alternatively, Thierry's approach uses a "legal" span
tag inside the anchor, though I don't know if you could put a list
inside the span and still validate. I also know there are folks who get
really upset by "display:none", but if I used "visibility:hidden" the
"hidden" boxes would affect the layout according to the spec, which is
not what I wanted.
Some (not all) caveats:
1. IE doesn't like it at all, but the IE7 enhanced javascript handles it
just fine. Worrisomely, IE7 doesn't handle this page on its own, which
is why you'll notice the conditional says "lte IE 7" as opposed to "lt
IE 7". There's still talk of finishing the CSS 2.1 support in IE7 on
IEBlog, so here's to hoping.
2. Opera 8 just doesn't like it at all. It seems to be the :focus
pseudo-class, because I switched to Thierry's approach specifically
because it already worked Opera, but as soon as I switched from :hover
to :focus, it broke, which I don't understand
(http://www.opera.com/docs/specs). It should "get it," so that's another
bad sign. I understood that Opera doesn't like switching from 'display:
none'; but I tried the SuckerFish positioning (left:-999em) workaround
instead, and it still wouldn't display. There's something Opera doesn't
like, but I'm not sure what it is. Maybe somebody on the list knows the
problem, or can get it to work?
3. I tried to use both :focus and :hover, with the obvious problem that
focusing one and hovering another list element would overlay them. I
tried to solve this with more CSS2 selectors, but ran out of time, so I
commented them out but left the examples in. You can try to fix them,
but it's beginning to seem that with a 50% (passes in Firefox,
half-passes in IE , fails in Opera 8) success ratio without even testing
across platforms, you either have to be very committed to CSS and
compliant code or begin to consider using Javascript until CSS2 is more
commonly supported.
I do, however, suspect many folks on the list could substantially
improve the examples above. For what it's worth, both examples above
currently validate.
Any suggestions, comments or browser-checks would be appreciated. I'd
like to see this actually work, or maybe somebody's already done it better?
Regards,
--
Derek
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
