Previous Message
Next Message

Pure CSS Flyout demo [tolerance zone]

Sent by Big John on 28 February 2005 02:02


Fletch wrote:

> I agree this would be ideal if possible with a flyout menu.  However you 
> would have to avoid frustrating users who are actually trying to make the 
> menu collapse by moving the mouse away from the menu.  Perhaps you could 
> do this by in some way shading the "tolerance zone" so the user knows 
> what's going on.

Ooo, good one, Fletch! It so happens that the padding zones can indeed 
be backgrounded, which is how I got them tweaked up. I don't see why they 
couldn't receive faux translucent checkerboard gifs (since IE pukes
on PNG's). The zones are currently set to start 10px left of a flyout,
but the left side could be eliminated, and in fact, the nested visible
flyout box could be neg margined another 10px left so that it "sticks out"
of the colored zone.

That way, the zone would begin exactly where the parent box ends, avoiding
ugly overlapping effects with the parent flyout elements. Since I added
a special empty div to provide an extra 10px of "sticky hovering" along
the bottoms of the parent links, that would still insure against corner
cutting when the user goes right and curves down onto the new flyout.

Also, that sticky hover zone below the parent links does not have to be 
all the way across the box. It could be just a fat square tucked right 
into that corner cutting area, allowing it to be bigger, without seriously
interfering with the next link-flyout-parent in the stack.

:)

A side note here; That extended div padding actually MUST have either 
a BG color or a BG image, or IE/win won't obey when it's hovered! 
And here's the thigh-slapper: That BG image call need not target 
a real image file. That's right folks, merely PRETENDING to call 
a BG image is enough to fix the bug! 

We have taken to using this: "background: url(stupid.msie);" 

>:-D

Big John

PS - I gotta try this checkerboard thing, right now...



=====
-- 
Perennial student + Impractical joker + CSS junkie = Big John
<http://www.positioniseverything.net>

__________________________________________________
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread: