DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X (v3.10) | 6

Hierarchical Menus Ver. 3 - Addendum X (v3.10)
quieter menus for Navigator

The itemOver() function, called whenever an item is moused over, has two instances of font color change that we need to replace:

function itemOver(){
  if (keepHilite) {
    ...
      if (NS4) {
        this.container.currentItem.bgColor = this.container.menuBGColor;

        if (NSfontOver) {
          with (this.container.currentItem.txtLyr.document) {
            write(this.container.currentItem.htmStr)
            close();
          }
        }
      }
      else {
        ...
      }
    }
  }
  if (IE4) {
    ...
  }
  else {
    this.bgColor = this.container.menuBGOver;

    if (NSfontOver) {
      this.txtLyr.document.write(this.htmStrOver);
      this.txtLyr.document.close();
    }
  }
  ...
}

The first instance is executed only when keepHilite is true, that is, when we want to retain an item highlight as we navigate a menu tree. The previously-highlighted-item is given the idle color.

Secondly, the item we are over is given the rollover color. These statements are always executed.

Our new itemOver() function looks like this:

function itemOver(){
  if (keepHilite) {
    ...
      if (NS4) {
        this.container.currentItem.bgColor = this.container.menuBGColor;

        this.container.currentItem.txtLyrOff.visibility = "inherit";
        this.container.currentItem.txtLyrOn.visibility = "hide";
      }
      else {
        ...
      }
    }
  }
  if (IE4) {
    ...
  }
  else {
    this.bgColor = this.container.menuBGOver;

    this.txtLyrOff.visibility = "hide";
    this.txtLyrOn.visibility = "inherit";
  }
  ...
}

The text layer that needs to be visible is given a visibility value of "inherit" and the other text layer is hidden.

The third text layer font color change is in itemOut(), called when we mouse away from an item.

function itemOut() {
    if (IE4) {
        ...
    }
    else {
        if (!keepHilite) {
            this.bgColor = this.container.menuBGColor;

            if (NSfontOver) {
                with (this.txtLyr.document) {
                    write(this.htmStr);
                    close();
                }
            }
    
        }
        ...
    }
}

When we leave an item, the item's coloring changes back to the "idle" version, only if keepHilite is false, that is, if we do not want to retain the item highlight as we navigate the menus.

We make the change as before:

function itemOut() {
    if (IE4) {
        ...
    }
    else {
        if (!keepHilite) {
            this.bgColor = this.container.menuBGColor;

            this.txtLyrOff.visibility = "inherit";
            this.txtLyrOn.visibility = "hide";
        }
        ...
    }
}

Finally, the showIt() function, which hides and displays menus, checks to see if a highlighted item exists, and takes the highlight off:

function showIt(on) {
    if (NS4) {
        ...
        if (keepHilite && this.currentItem) {
            this.currentItem.bgColor = this.menuBGColor;

            if (NSfontOver) {
                with (this.currentItem.txtLyr.document) {
                    write(this.currentItem.htmStr);
                    close();
                }
            }
        }
    }
    else {
        ...
    }
    ...
}

Same change as before:

function showIt(on) {
    if (NS4) {
        ...
        if (keepHilite && this.currentItem) {
            this.currentItem.bgColor = this.menuBGColor;

            this.currentItem.txtLyrOff.visibility = "inherit";
            this.currentItem.txtLyrOn.visibility = "hide";
        }
    }
    else {
        ...
    }
    ...
}

With these simple changes we have Unix-enabled, stable, and more importantly for some of us, "quiet" Navigator menus. Now, why didn't we do this earlier? Duh...I dunno.

The complete external hierMenus.js script, Version 3.10, is reproduced on the final page.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: June 27, 2000
Revised: June 27, 2000

URL: https://www.webreference.com/dhtml/column21/addendum10/6.html