[whatwg] Suggestion for Menus in Web Forms 2.0

[Matthew Thomas]

On 7 Aug, 2004, at 8:50 PM, Ian Hickson wrote:
> ...
> Which direction inline menu "bars" go in is the least of my worries. 
> The primary problem I was referring to is that if we are assuming that 
> inline menu bars must simply be styled using CSS, then where do the 
> labels come from?
>
>    <menubar>
>     <menu label="File">
> ...

Ah! Your problem there is that you're using an attribute for data that 
should be human-readable by default (even in the absence of CSS or WA1 
support). Don't do that; use an element instead.

     <menulist>
      <menu id="fm">
       <menutitle>File</menutitle>
       <itemgroup>
        <li command="NewRecord">New</li>
        <li command="OpenRecord">Open…</li>
       </itemgroup>
       <itemgroup>
        <li command="ExportRecord">Export as Text</li>
        <li command="RenameRecord">Rename…</li>
        <li command="DeleteRecord">Delete</li>
       </itemgroup>
       <li command="SaveAndClose">Close</li>
      </menu>
      <menu>
       ...
      </menu>
      <menu>
       ...
      </menu>
     </menulist>

> ...
> The menu element itself is display:none, and its display (on visual 
> media) is micromanaged by the UA. The question is how do you style the 
> label? Where is it? How does it get rendered?

After getting rid of the menu {display: none}, something like this 
would  probably be a good start:

menu {cursor: default !important;}
menutitle {display: inline;}
menutitle::after {content: "  #▾"}
menulist menutitle {display: block;}
menulist menutitle::after {content: none;}
menulist optgroup menutitle::after {content: " ▸"}
menu li {display: none;}
menu::active itemgroup, menu::active li {display: block;}
menu::active menutitle, menu li::active {color: invert; 
background-color: invert;}

(The rules for correctly positioning a menu relative to its title, 
however, are highly algorithmic and well beyond what CSS can specify. 
The correct behavior for leaving a submenu open while moving diagonally 
towards one of its children, even while passing over other submenu 
titles en route, is also well beyond what CSS can specify.)

-- 
Matthew Thomas
http://mpt.net.nz/