[whatwg] [WA1] Quick thoughts on menus.

[Matthew Raymond]

   Below are two examples of how I think menus could be implemented. The
<menulabel> element is treated as an element that, when activated,
displays the <menu> element it's associated with as a menu. The methods
of creating an association are identical to the <label> element.

   In my model, there are no menu bars, but a <nav> and its child
<menulabel> elements can be styled to create the appearance of one. (An
actual <menubar> element could still be added later.)

   Also, my model doesn't allow menus to be displayed via a hyperlink.
Displaying menus via hyperlink would introduce weird situations like
bookmarking menus and referencing menus outside the document. While it
may be possible to create a set of rules to deal with these various
problems, I believe my <menulabel> solution to be far simpler and easier
to learn.

   Example of a simulated menubar:

| <nav>
|   <menulabel>File
|     <menu id="menuFile">
|       <li>
|         <menulabel>Downloads
|           <menu id="menuDownloads">
|             <li><a href="source.html">Source Code</a></li>
|             <li><a href="wallpaper.html">Wallpaper</a></li>
|           </menu>
|         </menulabel>
|       </li>
|       <li><hr></li>
|       <li><a href="exit.html">Exit</a></li>
|     </menu>
|   </menulabel>
|   <a href="help.html">Help</a>
| </nav>

   Example of a hidden menu that is displayed by activating a <menulabel>:

| <div>
|   <menulabel for="hiddenMenu" label="Edit"></menulabel>
|   <menu id="hiddenMenu">
|     <commandset>
|       <command id="menuEditRedo" label="Redo" onclick="redo()">
|       <command id="menuEditUndo" label="Undo" onclick="undo()">
|     </commandset>
|     <commandset>
|       <command id="menuEditCut" label="Cut" onclick="cut()">
|       <command id="menuEditCopy" label="Copy" onclick="copy()">
|       <command id="menuEditPaste" label="Paste" onclick="paste()">
|     </commandset>
|   </menu>
| </div>

   Note that the last example is designed not to be visible in legacy
browsers. Context menus are still up for debate, but they'd probably
look something like the following if we permit them:

| <input type="text" name="myTextInput" context-menu="hiddenMenu">
| <menu id="hiddenMenu">
|   <commandset>
|     <command id="menuEditRedo" label="Redo" onclick="redo()">
|     <command id="menuEditUndo" label="Undo" onclick="undo()">
|   </commandset>
|   <commandset>
|     <command id="menuEditCut" label="Cut" onclick="cut()">
|     <command id="menuEditCopy" label="Copy" onclick="copy()">
|     <command id="menuEditPaste" label="Paste" onclick="paste()">
|   </commandset>
| </menu>

   Thoughts?