- From: Matthew Raymond <mattraymond@earthlink.net>
- Date: Wed, 23 Jun 2004 16:21:23 -0400
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