[whatwg] Looking at menus in HTML5...

[Andrew Fedoniouk]

----- Original Message ----- 
From: "Ian Hickson" <ian at hixie.ch>
To: "Matthew Raymond" <mattraymond at earthlink.net>
Cc: "WHAT WG List" <whatwg at whatwg.org>
Sent: Monday, August 06, 2007 4:35 PM
Subject: Re: [whatwg] Looking at menus in HTML5...


> On Tue, 5 Dec 2006, Matthew Raymond wrote:
>>
>> Any |label|-free <menu> elements that are immediate children of a <menu
>> type="popup"> or <menu type="toolbar"> should be ignored. A menu within
>> a menu shouldn't be used for anything but a submenu. If we want true
>> command groups, we need a new element, perhaps named "cmdgroup" or
>> something. (Is there a sufficient use case for non-hierarchical groups
>> that produce separators? Or is <hr> sufficient? Note that <hr> degrades
>> to a visible form on legacy user agents.)
>
> I don't understand why? It seems sensible to me to use <menu> for
> grouping.
>

Ian, this @label in menu is a bit ugly. Consider following...

Here is what I need:

<menu>
  <li><b>F</b>irst option</li>
  <li><b>S</b>econd option</li>
  <li><b>T</b>hird option - submenu
       <menu>
            ....
       </menu>
  </li>
</menu>

Pay attention on "Third option - submenu". It contains
additional markup and/or styling.
How you would achieve this with the @label?

Solution:

'li' element is very close to the 'div' - it has either inlines or blocks. 
If
it contains inlines and blocks then inlines are wrapped in anonymous 
paragraphs.
So submenu item is the one that has exactly two block childeren:
First is either <label> element or anonymous paragraph element and second is
<menu>.

Having this definition hiearachical menu can be defined as

<menu>
  <li>caption 1</li>
  <li>caption 2</li>
  <li>caption 3
       <menu>
           <li>caption 3.1</li>
           <li>caption 3.2</li>
       </menu>
  </li>
</menu>

In CSS sub menu could be defined as

li > menu:real-nth-child(2) { display: none; }
li:active > menu:real-nth-child(2) { display: block; position: popup; }

real-nth-child here is a (imaginable) selector that matches
physical node position.

Andrew Fedoniouk.
http://terrainformatica.com