G'day Jay,

I've heard the request for pure CSS drop-down menus quite a lot, and  
rarely see people getting told what they should about how *bad* they  
are.

CSS is designed as a method for styling visible items and laying them  
out relative to one-another. Drop-down menus are behavioural, and  
thus should be taken care of with Javascript (not Java; there's a  
huge difference, worth noting). Of course, accessibility means  
keeping in place a series of fall-backs which allow non-JS enabled  
users to view the list.

There are some massive accessibility gains that Javascript drop-downs  
provide:
        • You can animate opening and closing lists (not just eye-candy; it  
makes it very clear to the user when there is a change on the screen)
        • You can provide a suitable pause before the list collapses (your  
users are not necessarily skilled with a mouse or keyboard. They may  
have difficulty operating a mouse and I can tell you from experience  
that they have real difficulty changing movement from horizontal  
(along your list headings) to vertical (down your first level list  
items) to horizontal (across the list item to the sublist) to  
vertical again (down the sublist items) without accidentally moving  
the mouse out of the bounds of the list item. Javascript menus  
introduce a delay before actions are cancelled so that a slight  
movement of the cursor outside the bounds of a list item is not  
penalised against)
        • You can get identical behaviour in all the major browsers (all the  
CSS-only drop-down menus rely on CSS hackery to work properly in IE.  
Every sensible browser can handle the ul>li selector; the basis of a  
simple, standards-based CSS solution, but IE doesn't. CSS hackery is  
no better for you as someone who doesn't understand JS but does  
understand CSS than JS hackery; CSS hacks commonly *don't make  
sense*. They're backward thinking and complex to write).


Please, for your users' sake: use a Javascript drop down menu (but  
make sure it's one that is fully accessible, and that reverts to a  
pure-CSS menu when JS is not available). I use TwinHelix Designs'  
excellent FreeStyle Menus (http://www.twinhelix.com/dhtml/fsmenu/)  
personally, but it's donationware for commercial use.

Cheers,

Kit
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to