[TYPO3-hci] My 4.1 proposal - again

[Christopher Torgalson]

JoH asenau wrote:
>>> http://www.cssplay.co.uk/menus/basic_dd.html

<snip>

> But anyway the question still remains, if a "CSS only" version of a BE
> layermenu is a must have and worth all the efforts ...

Well, if we think the best solution overall is a 'flyout' menu, consider 
the following facts:

-- CSS-/only/ solutions are possible in all modern non-IE browsers, but
-- Solutions for IE /must/ involve javascript, and
-- CSS-only solutions tend to be more difficult to use with a mouse 
(i.e. because they immediately collapse if the pointer moves ever so 
slightly away from the active area)
-- CSS-only solutions cannot be made to behave like the application 
menus most users are already accustomed to.

Given these conditions, what about an implementation that works this way:

-----

1. list-based (quite accessible or, if you prefer, still works in 
disaster situations where something goes very wrong...)

2. CSS for basic styling only, but *not* for any behaviour,

3. javascript for the following tasks:
   a. add styles to hide the sub-levels of the lists,
   b. replace :hover effect by expanding/contracting (as Joey suggested 
already) the entire second/third/etc <ul> elements using 'display:block' 
(or whatever eliminates Joey's 'flickering' [which, incidentally, I can 
not currently see in any version of IE on Win 2k or XP here...])
   c. add a much-needed /delay/ so that the menus do not instantly 
collapse when the mouse pointer is moved one pixel off the active area 
of the menu (additionally or alternatively, use js to exactly simulate 
the behaviour of OS-level menus; i.e. click to expand top-level, 
mouseover for sub-levels and /leave them open/ until something else is 
moused-over/clicked...)

-----

I favour this approach because in my opinion all /new/ functionality 
added to the BE should be _in principle_ usable without javascript. A 
menu built this way could be made to work in /any/ of the following 
situations:

-- css but no js
-- js but no css
-- no css or js



-Christopher [now with a surname!]