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

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.

By now, you will have realized that since we can execute any JavaScript statement(s) from the menu items, we can also issue the:

javascript:parent.location.href='url.html' or
javascript:parent.frameName.location.href='url.html'or
javascript:top.location.href='url.html'or
javascript:top.frameName.location.href='url.html'

statements, loading a page into any frame, frameset or full window.

Well, yes and no. Yes, because that is exactly what we include in the arrays. The menu in the frame example, that appears in a new window when you click the form button in the left column, uses this array:

arMenu1 = new Array(
"Main Frame","inMain.html",0,
"Other Frame",
  "javascript:top.second.location.href='inBot.html'",0,
"Full Frame","javascript:top.location.href='inTop.html'",0
)

No, because a problem arises when linkIt() executes its solitary statement:

    menuLoc.location.href = this.linkText;

Without going into the programming logic, one can visually see that there will be a redundancy. The javascript examples on the previous page read like this, in plain English:

"Load the javascript statement such and such."
or
"Load the javascript function such and such."

Our frame loading statements read like this:

"Load the javascript statement which loads the frame."

The double load is apparent, so we must filter it out in this way:

function linkIt() {
// following line NEW to v2.1
  if (this.linkText.indexOf("javascript")!=-1)
      {eval(this.linkText);return}
  menuLoc.location.href = this.linkText;
}

The linkIt() function now checks for a javascript: protocol in the URL string. If found, the string is executed as a JavaScript statement by evaluating it. Then the function returns. If a javascript: protocol is not found, the function continues normally. This line will capture and execute all JavaScript statements, including the examples from the previous page. This is unecessary, but harmless.

That's it for now. Two additional lines and a lot more functionality. The complete code for Version 2.1 will be repeated on our final code page. Before that, a look at the features to be included in Version 3.