[whatwg] Suggestion for Menus in Web Forms 2.0

[Ian Hickson]

On Wed, 23 Jun 2004, Matthew Raymond wrote:
> 
>   <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>

Here is how that would be done using the current proposed model:

  <menubar id="sample-menubar">
   <menu label="Application Menu">
    <select>
      <option value="" selected> Application Menu </option>
      <optgroup label="File">
        <optgroup label="New">
          <option label="Document">New - Document</option>
          <option label="Template">New - Template</option>
          <optgroup label="Web Application">
            <option label="Web Forms 2.0"> New - WebApp - WF2 </option>
            <option label="XForms 2.0"> New - WebApp - XForms 2.0 </option>
            <option label="SVG 1.2"> New - WebApp - SVG 1.2 </option>
            <option label="XAML"> New - WebApp - XAML </option>
            <option label="XUL"> New - WebApp - XUL </option>
          </optgroup>
        </optgroup>
        <option label="Open">Open</option>
        <option label="Save">Save</option>
        <option value="" disabled>-----</option>
        <option label="Exit">Exit</option>
      </optgroup>
      <optgroup label="Edit">
        <option label="Undo">Undo</option>
        <option label="Redo">Redo</option>
      </optgroup>
      <option label="Help">Help</option>
    </select>
   </menu>
  </menubar>

(In both cases, appropriate logic would have to be included in the
<select> element's onchange="" attribute to actually make anything
happen.)

The thing I'm still not really sure about is the whole thing of how to
make it look like a menu bar when it is used inline, instead of being
used in the actual menu bar.

At the moment that requires the use of <a> elements, so that the top
would look like this:

  <menubar>
   <a href="#sample-menubar">Application Menu</a>
   <menu id="sample-menubar">
    <select>
      <option value="" selected> Application Menu </option>
      <optgroup label="File">

...which is rather poor. Suggestions welcome.

I thought of making it just work with:

  <menubar>
   <menu label="Application Menu">
    <select>
      <option value="" selected> Application Menu </option>

...but I couldn't work out how to define it so that the CSS and DOM
Events models would work sanely with that. It would need CSS3 Content
type stuff at least. (Or XBL, I guess.)


> 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.

In the proposed model, this is achieved by using a <menubar> element
instead of an attribute. This allows other elements (such as links,
buttons, etc) to be used instead of a <select> depending on exactly
what behaviour is desired.


> 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.

Once you know it's a menu bar, none of this is really necessary.


> 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.

There have been a lot of requests for nested OPTGROUPs, so I'm
thinking maybe we should just allow them.


> 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.

Instead of type="dummy" the current proposal says that value="" does
this.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'