[thelist] CSS drop down menus

[aardvark]

On 8 Jul 2005 at 10:08, Christian Heilmann wrote:
[...]
> 1) Most CSS only dropdown navigations are not keyboard accessible -
> some are but only on non-mainstream browsers
> 2) A lot of dropdowns are too fast in hiding the elements, which means
> that a visitor with bad hand-eye coordination will get really
> frustrated when you hide and show on hover rather than onclick.
> 3) When you use dropdown navigations you assume the visitor has enough
> screen estate to show them all, she might not and lose the navigation
> when scrolling the viewport
> 4) With multi level dropdowns there is no "you are here" state, the
> visitor will need to go through all levels on every page
> 5) Without CSS and/or without JavaScript, the visitor will get a lot
> of links not related to the current section. This might confuse and
> can be annoying if you are only using a keyboard, as you have to tab
> through the lot of them.

chris, all *very* valid points, and a big reason why i've recommended 
against them for years...

however, we have updated our company site with a refined version of 
the son of suckerfish that addresses some of these points -- what 
better way to test them than in real life? 

http://algonquinstudios.com/

the revised version i've created addresses some of your points:

1. while it uses more JS to do it, it is at least keyboard accessible 
in IE5+...

2. we use onhover, and yes, it is still too easy to lose the menu... 
but with larger hit areas, a longer delay before hiding, and clearer 
icons for submenus, we've at least started to address some of 
these...

3. we have integrated the menus into our content management system 
(QuantumCMS)... the author can control how many levels of menu are 
displayed, as well as how many items are in each level (which then 
links to the section with the text "XX more items...)... this can 
help to ensure the menus aren't too big to be useful...

4. we still provide our traditional secondary navigation, plus "skip 
navigation" links... in addition, we have added a style to highlight 
the current page in the flyout list...

5. absolutely still an issue, which is why we have a "skip 
navigation" link before the list...

additionally, the CMS reads the length of each top-level item and 
chooses different classes to control the width so that text doesn't 
get clipped in what would otherwise be set-width boxes...

no, it's not perfect, but with these kinds of refinements, it gets 
*so* much closer than the old days of DHTML menus...

go steal the code...