[whatwg] Suggestion for Menus in Web Forms 2.0

Note that there are really two kinds of menus... DHTML popup menus that 
should support CSS styles and be similar to DHTML menus on the Web 
today (I believe these should be specifiable just on <ul>/<li> entirely 
using CSS, e.g., with new display types).

For native menus, I don't think a menubar widget makes any real sense 
unless you are a top-level window.  I'm not sure that's within the 
scope of Web Forms, but perhaps it is in the scope of Web Apps.

dave

On Jun 23, 2004, at 1:21 PM, Matthew Raymond wrote:

>    I've been pondering how to do menus in Web Forms 2.0. I think I 
> have a reasonable solution. Here's some sample code:
>
> ---------------------------
>
> <html>
> <head>
> <title>Menu Example</title>
> </head>
> <body>
>   <select type="menubar" id="sample-menubar">
>     <option type="dummy" label="Application Menu" selected>
>       Application Menu
>     </option>
>     <optgroup type="menu" label="File" id="file-menu">
>       <submenu label="New" id="file-new-submenu">
>         <option type="menuitem" label="Document">New - 
> Document</option>
>         <option type="menuitem" label="Template">New - 
> Template</option>
>         <submenu label="Web Application" id="file-new-webapp-submenu">
>           <option type="menuitem" label="Web Forms 2.0">
>             New - WebApp - WF2
>           </option>
>           <option type="menuitem" label="XForms 2.0">
>             New - WebApp - XForms 2.0
>           </option>
>           <option type="menuitem" label="SVG 1.2">
>             New - WebApp - SVG 1.2
>           </option>
>           <option type="menuitem" label="XAML">
>             New - WebApp - XAML
>           </option>
>           <option type="menuitem" label="XUL">
>             New - WebApp - XUL
>           </option>
>         </submenu>
>       </submenu>
>       <option type="menuitem" label="Open">Open</option>
>       <option type="menuitem" label="Save">Save</option>
>       <option type="menuseparator" disabled>-----</option>
>       <option type="menuitem" label="Exit">Exit</option>
>     </optgroup>
>     <optgroup type="menu" label="Edit" id="edit-menu">
>       <option type="menuitem" label="Undo">Undo</option>
>       <option type="menuitem" label="Redo">Redo</option>
>     </optgroup>
>     <option type="menuitem" label="Help">Help</option>
>   </select>
>
>   <p>Web Forms 2.0 - Now with 50% more juice!</p>
> </body>
> </html>
>
> ---------------------------
>
>    I have <select> a new attribute "type" which makes it default to a 
> standard select, while specifying the "menubar" type makes the control 
> a menu bar, the positioning and rendering of which can be handled by 
> the UA. This also alerts the UA to the fact that child elements of 
> <select> are probably menu-related.
>
>    For <optgroup>, I've added type="menu". This lets the UA know that 
> the option group is intended to be a top level menu item that opens a 
> menu popup. Similarly, the element <option> has type="menuitem" to 
> indicate that it is a menu item.
>
>    Currently, HTML doesn't allow nested <optgroup> elements, so I 
> decided to create a tag called <submenu>, which can be nested an many 
> times as you want, but which will be ignored by IE. The <submenu> 
> element is just what it sounds like. It creates submenus. It's similar 
> to a combination of the <menu> and <menupopup> elements in XUL.
>
>    Unfortunately, I couldn't create a one-to-one relationship between 
> XUL and HTML whereby tags could be converted directly. It's too 
> difficult to make that work and still have it degrade gracefully.
>
>    The general idea is that if the user's browser is IE 6.0, the menu 
> will render as a simple drop-down list. Javascript could then be used 
> to capture what item in the list is selected. There is always a single 
> <option> at the beginning <option> with type "dummy" to ensure that if 
> an IE user doesn't accidently click a menu item when they try to 
> escape the drop-down list.
>
>    Note that for UAs that render the menu bar and its respective 
> menus, the labels are used for the menu items and not the child text. 
> IE (and the current version of Mozilla) displays the child text of the 
> drop-down list items rather than the <option> labels, so this gives 
> you the ability to define the text for both a WF2-capable UA and IE 
> 6.0 at the same time.
>
>    That's all I can think of for the moment. For now I think I'll just 
> sit back and watch my intellectual a$$ get kicked.

Received on Wednesday, 23 June 2004 15:13:04 UTC