DHTML Lab: Cross-Browser Hierarchical Menus; Compatibility

Cross-Browser Hierarchical Menus
final methods and backward compatibility

Webreference

Contents

Check out the menus a final time.

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

Final Functions

If the menu item is a link, and the user clicks it, the menu's linkIt() method is called, which has been assigned this function:

function linkIt() {
    location.href = this.linkText;
}

For Explorer 4 users, as you will recall, we provide the added courtesy of not allowing the irritating selection of content, if the user inadvertently drags the mouse over an item. The menu's onselectstart event handler calls cancelSelect() which simply returns false, cancelling the default action, that is, the highlighting. We also used this handler in our Explorer drag-and-drop column.

function cancelSelect(){return false}

We've been positioning the menus using the built-in moveTo() method of Navigator and a custom moveTo() method for Explorer. The latter is defined by the moveTo() function. Only Explorer sees it, since the method assignment was set earlier in a browser-specific statement.

function moveTo(xPos,yPos) {
	this.style.pixelLeft = xPos;
	this.style.pixelTop = yPos;
}

Cross-Browser and Backward Compatibility

Explorer 4 for the Macintosh
The present technique does not work on the Macintosh featureless-bug-plagued-beta-masquerading-as-a-release version of Explorer 4, although we would like it to. Any suggestions are welcome. In our in-page common script, we can filter it out, by checking for browser version, in our usual way, and platform through the navigator object:

   NS4 = (document.layers) ? 1 : 0;
   IE4 = (document.all) ? 1 : 0;
  ver4 = (NS4 || IE4) ? 1 : 0;   
 isMac = (navigator.appVersion.indexOf("Mac") != -1) ? 1 : 0;
isMenu = (NS4 || (IE4 && !isMac)) ? 1 : 0;

Here, we've defined a new variable, isMenu, which will only be true if the user is using Navigator 4 or Explorer 4 in a non-Macintosh version. We only want to exclude IE4Mac from the menu routines, not other DHTML that it may support. Our usual ver4 variable may still be useful, therefore, for non-menu DHTML.

Common Script
Our common to all browsers in-page script now becomes:

<SCRIPT LANGUAGE="JavaScript">
<!--
   NS4 = (document.layers) ? 1 : 0;
   IE4 = (document.all) ? 1 : 0;
  ver4 = (NS4 || IE4) ? 1 : 0;   
 isMac = (navigator.appVersion.indexOf("Mac") != -1) ? 1 : 0;
isMenu = (NS4 || (IE4 && !isMac)) ? 1 : 0;
   function popUp(){return};
   function popDown(){return};
   if (!ver4) event = null;
//-->
</SCRIPT>

Recall that the two functions called by the link event handlers in our page our first defined here for non-DHTML browsers. DHTML browsers will use the versions defined in our external script which will be executed later. Since the event keyword is passed to these functions, we give it a value here, again for non-DHTML browsers.

Parameter Declaration
Our in-page parameter variables should only be read by the menu-capable browsers:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
    if (isMenu) {
        menuWidth = 120;
        childOverlap = 50;
        childOffset = 3;
        .
        .
        .
        borSty = "outset";
        imgSrc = "triangle.gif";
        imgSiz = 10;
    }
//-->
</SCRIPT>

Conditional External File Definition
Finally, the two external files necessary for the menus, the array file and the routine file, should be made to load only for menu-capable browsers:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
document.write("<SCRIPT(keep with next line)
   LANGUAGE='JavaScript1.2' SRC='hierArrays.js'><\/SCRIPT>");
document.write("<SCRIPT(keep with next line)
   LANGUAGE='JavaScript1.2' SRC='hierMenus.js'><\/SCRIPT>");
}
//-->
</SCRIPT>

Possible Enhancements

For the more adventurous, there are many enhancements possible for our menu routines. A fourth menu level is one, obviously. Different features for menu/item styling is another. For example, a menu might have a border, while the items do not. This is a little more difficult in Navigator than Explorer, but it can be done. See the Jigsaw Puzzle columns, where we create such a border.

There are some desired features that are impossible to achieve. Having the menus overlap frame borders is one. However, an IFRAME version of the menus would be a worthwhile project for Explorer developers.

Bugs

As we know, Navigator loses the DHTML layout when the browser window is resized. If your windows are resizable, the onresize event needs to be captured and directed to reload the page. But then you all know that by now.

We have used onfocus for link items in Navigator, since the click event cannot be properly captured. When the user navigates to a new page, after a menu item selection, the new page may continue to be "in focus." That is, parts of it may be highlighted as the user moves the mouse. A simple click removes the focus.

The Full Code

All the code discussed in this column is repeated, in its entirety, on the next three pages.