W3C home > Mailing lists > Public > whatwg@whatwg.org > October 2005

[whatwg] [WA1] Quick thoughts on menus.

From: Matthew Raymond <mattraymond@earthlink.net>
Date: Sun, 16 Oct 2005 01:43:01 -0400
Message-ID: <4351E865.30709@earthlink.net>
   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?
Received on Saturday, 15 October 2005 22:43:01 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:58:43 UTC