DHTML Lab: Hierarchical Menus Ver. 2 - Addendum (v2.1) | 4

Hierarchical Menus Ver. 2 - Addendum (v2.1)
additional features

Other Menu URLs

Script URLs

Click the links above to reveal menus.

Click the button above for frame-related mods.

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

The javascript: URL

The second menu in the left column is created from this array:

arMenu2 = new Array(
"Alert","javascript:alert('hello')",0,
"Open Window","javascript:window.open('inWind.html')",0,
"Function","javascript:nav.newFunct()",0
)

We use the javascript: protocol to create a JavaScript URL, just as we would in the HREF= attribute. The first item link displays an alert window. The second one loads a page into a new window. The third one runs a function called newFunct().

We have preceded the call to newFunct() with nav, which identifies which page (HTML file) the newFunct() function is located in. Remember that if the menus are created in a full-window page, both the code and the menus reside in the same page. In the frameset version, the code resides in the navigation frame, but the menus are in the "main" frame, that is, two different places.

It is assumed that newFunct() or any other functions called from menu items will be included in hierMenus.js, which is either in the full window or the navigation frame. We must, therefore, add this one line to the startIt() function in hierMenus.js:

function startIt() {
  if (isFrames) {
    menuLoc = eval("parent.frames." + mainFrName);
    if (NS4) menuLoc.onunload = initVars;
    if (IE4) menuLoc.document.body.onunload = initVars;
  }
  else {
    menuLoc = window;
  }
// following line NEW to v2.1
  menuLoc.nav = nav = window;
  if (NS4) setTimeout("loader.onresize=reDo",100);
  makeTop();    
}

We create two variables, both called nav. One of them (nav) resides in the navigation frame/full window. The other (menuLoc.nav) resides in the main frame/full window. If we are not using frames, menuLoc.nav is redundant, but harmless. In a frameset, we end up creating a variable nav, accessible to both frames, that refers to the navigation frame. The navigation frame contains hierMenus.js so it is the window object that is assigned to the variables.

Now, by preceding all our function calls with nav, we assure that the function is read from hierMenus.js, regardless of whether we are in a frame or full window setup.

Finally, let's load a page into any frame.