Above and Beyond DHTML Menus

p until now, the heart of a Web page was HTML, but that's changing; HTML is simply not flexible enough to meet modern Web development needs. The <SELECT> element, for example, can contain only one set of menu options, although those options can be grouped a little using the <OPTGROUP> tag. If you want something fancier—particularly a multi-level menu—then you have to explore alternatives beyond pure HTML. This article shows how you can radically simplify multi-level menus for use with Mozilla to. You'll never want to work with the older, messier techniques again.

What You Need

Any standard version of Mozilla, either the Mozilla Application Suite or the Firebird standalone browser.

Developer Choices for Hierarchical Menus
Developing a hierarchical menu means breaking out of the HTML box. There are some standard moves that developers make: use Flash; use Java; use ActiveX. Apart from training issues, the main problem with these solutions is that they force you to make assumptions about the end-users' Web browser, plug-ins, and security setup or their willingness and ability to change those in order to run your application. Even though making such assumptions is not a good idea, decisions to use particular non-standard technologies are common; developers and sites use these assumptions knowing that an attendant restriction of the potential user-base is inevitable. For example, a huge number of Web sites rely, at least partially, on the likelihood that their users will have Flash installed.

A more common move is to enhance plain HTML with JavaScript code, transforming it into DHTML. Developers use <DIV> and <SPAN> tags to chop the page content up into identifiable bits, and then use JavaScript and CSS code to move those bits around until they look like a new user-interface widget—one that can't be implemented in HTML directly. Although DHTML is common, it still forces assumptions on the reader. DHTML menus can easily ruin accessibility (says the W3C and Microsoft). DHTML menus require that JavaScript is turned on. DHTML menus can't be done in many older and minor browsers at all. Of course, it's worth noting that few older browsers are in use, and that the number of users who have JavaScript turned off is miniscule.

A far worse consequence of the choice to use DHTML menus is that it can cause Web developers go through an agony of compatibility testing. Such testing is required to ensure that the increasingly ancient Internet Explorer behaves itself. I'm sure that "agony" is the correct collective noun for a group of Web developers trying to implement professional cross-browser code. Such trials are hard to avoid, even if you shell out time or money on one of the existing cross-platform DHTML hierarchical menu libraries. Such code is nearly impossible to understand if time is short.

Here's a little sanity. It's apparent that the decision to build multi-level menus forces some assumptions on the target browser, so let's make a break from the standard assumptions and see what happens if you assume the target browser is exclusively Mozilla. Many user communities now exist where Mozilla use is the primary or only choice, or where Mozilla use is increasing rapidly. The growing number of Linux users is an example.

Mozilla <menulist> to the Rescue
If you're trying to produce a menu, a <menu> tag would be very handy. HTML doesn't have one. Fortunately, Mozilla's browser supports XML, XHTML, and XML Namespaces. That means you have a fair chance of blending two XML standards together in the one document, producing results that are the best of both standards.. Mozilla's XUL standard provides <menu> and <menulist> tags that can be blended with XHTML.

Before this will work, you need to modernize your development to support XML Namespaces. That means generating XHTML, not HTML, content. To serve up an XML document containing multiple namespaces, that document must have Content-Type text/xml, or a content type that matches one of the XML standards used. For Mozilla, a document that holds XHTML and XUL should be identified with the XUL content type:

   application/vnd.mozilla.xul+xml

This MIME content type is used by Mozilla to detect and act on XUL content. It follows that Web servers must supply this string for XUL documents, instead of the default content type of text/html that's used for HTML. To enable this new type, in the common case of Apache, put this next line in the httpd.conf file:

   AddType application/vnd.mozilla.xul+xml .xxx

The file extension ".xxx" is a catch-all for XML documents with multiple namespaces. You could use a more specific .xul or .xns extension in this case. After this change, restart the server.

Next Page

---

• Download The Code for this Article

---