[whatwg] Suggestion for Menus in Web Forms 2.0

    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 13:21:23 UTC