Hiermenus Go Forth, I - DHTML Lab | WebReference

Hiermenus Go Forth, I - DHTML Lab


Hiermenus Go Forth*, I:
Version 4 - The External Arrays

This column begins a multi-column discussion of a new version of the hierarchical menu script.
Until our discussion is complete, the current version of the script will still be the latest maintenance release of Version 3: 3.10.3.
Read this column, and future columns, to learn how we built the menu script.
Use the most recent version of the script, always available in HierMenus Central.

Finally, Version 4 of our popular Hierarchical Menu Script has arrived!

This version is faster, more versatile, feature-rich and future-compatible. If the response to our last version is any indication, the ability to incorporate future reader suggestions is a must.

The Version 4 Columns

As with every major version of HM (see Version 1, Version 1 with frameset use, Version 2, Version 3) our discussion of the script will be complete. This, for better or for worse, means long columns. If you enjoy learning how and why we use every JavaScript statement in the script, you will be grateful. If you prefer to just cut-and-paste routines, well, there will be a short wait.

Instead of attempting to cram everything necessary for a full understanding of the script into one interminable column, we are splitting up our discussion into logical sections. Unlike previous versions, Version 4 is more condusive to fragmented discussion, because there is not one single hierMenus.js external script for all browsers and platforms.

The Cross-Browser Misnomer

As we all know by now, there is no such thing as cross-browser DHTML code. Any code that claims to be cross-browser like, admittedly, the DHTML Lab scripts, are rife with if...else statements, and poor lowest-common-denominator routines. Users end up downloading two or more times the script necessary for their browser and usually get compromised and unoptimized code to execute.

We are not referring only to the Navigator-Explorer differences. There are even more differences between Explorer versions. Microsoft, in reality, has released five DHTML browsers:

  1. IE4.x for Windows
  2. IE4.x for Macintosh (many differences even between 4.0/4.01/4.5 IEMac)
  3. IE5.0, IE5.01 for Windows
  4. IE5.x for Macintosh
  5. IE5.5 for Windows

Only the most rudimentary DHTML renders the same in all these browsers. If we find a lowest-common-denominator, we inevitably ignore IE5+ Windows-only functionality like behaviours or dynamic properties. As authors, we will know that we:

"could have done it a better way, but then it wouldn't have worked on [fill in browser name]"

HM Version 4 is comprised of several external files, each one optimized for a particular browser. Only the optimized file is loaded, giving users only the code necessary for their browser. These files will, of course, be much shorter than the Version 3.x hierMenus.js, providing yet another benefit.

We will, therefore, publish the complete HM script in the following order:

  1. The External Array File - hierArrays.js (this column)
    - review of the function of the menu-building arrays contained in the external file and introduction to the new array structure and elements.

  2. The External Array File - hierArrays.js
    - continuation of the discussion of the new array structure and elements.

  3. The In-page Code
    - all the script and links necessary for inclusion in the web page where the menus will appear, including the Global Parameter Variables.

  1. The External Menu Routines File for Navigator 4.x, all platforms.

  2. The External Menu Routines File for Explorer 4.x, for Windows.
    - these routines will also work in IE5.x for Windows, albeit unoptimized.

  3. The External Menu Routines File for Explorer 5.x, all platforms.

  4. The External Menu Routines File for Explorer 4.x Macintosh
    - this will be the first appearance of the HM for these browsers.

  5. The External Menu Routines File for Gecko (Mozilla/Netscape 6)
    - this will be the first appearance of the HM for these browsers.

These routines will all be for non-frameset full-window pages.

Well over 90% of HM use on the Web today is in non-frameset pages. Version 3 of HM makes many compromises, especially in execution speed and length, because it is a single script for both frameset and full-window pages.

With Version 4, users will load only the code applicable to their environment.

  1. Summary of the complete Full-Window flavor of HM Version 4.

  2. to ?.   Frameset Considerations

So Let's get started.

*with apologies to Blackadder

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Aug 08, 2000
Revised: Aug 08, 2000

URL: http://www.webreference.com/dhtml/column35/