On my site I have a "top menu" which has a shadow dropped on to the site from below. The shadow is 50px long overall. This puts my in a spot of bother, however, because it means that anything that is overshadowed cannot be clicked on, the layer above gets in the way.
To solve this dilemma I tried to use CSS3's box-shadow property and successfully duplicated the effect, but found that the performance penalty was so high that all the Javascript effects because very jumpy. I've decided that the slowdown was too great a side-effect and have thus reverted to an image based shadow.
My question is this: short of using the box-shadow CSS property, is there a way that I can have items in the shadow but have them clickable (essentially locking the upper layer to clicks) or do I just have to move it out of the way of the shadow?
I'm not sure that recording the events on the upper layer will work simply because there are text fields as well as checkboxes etc. and it's not a terribly ideal solution.
About inaccessibility, as far as the site I'm developing goes, I'm not terribly interested in supporting people who aren't using javascript and/or a modern browser using Webkit or Gecko or something other that's reasonable (id erat: I don't care about IE users).
Image based shadow vs CSS3 shadow issue
Reply With Quote
Bookmarks