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

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

Logo

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


Every menu item's display text is contained in the item's text layer, which we create and style in the itemSetup() function:

function itemSetup(whichItem,whichArray) {
    ...
    if (NS4) {
        ...

        this.txtLyr = new Layer(maxTxtWidth,this);
        if (isRight && this.container.isTree)
              this.txtLyr.left = fullImgSize;
        this.txtLyr.document.write(this.htmStr);
        this.txtLyr.document.close();
        this.txtLyr.visibility = "inherit";
        this.clip.bottom = this.txtLyr.document.height+itemPad;

        ...
    }
    else {
        ...
    }
}

Instead of a single text layer, we will now create two text layers, each with a different font color. There is no longer a single txtLyr child. We now have txtLyrOff (default display) and txtLyrOn (rollover display) child layers:

function itemSetup(whichItem,whichArray) {
    ...
    if (NS4) {
        ...

        this.txtLyrOff = new Layer(maxTxtWidth,this);
        if (isRight && this.container.isTree)
              this.txtLyrOff.left = fullImgSize;
        this.txtLyrOff.document.write(this.htmStr);
        this.txtLyrOff.document.close();
        this.txtLyrOff.visibility = "inherit";
        this.clip.bottom = this.txtLyrOff.document.height+itemPad;
        this.txtLyrOn = new Layer(maxTxtWidth,this);
        if (isRight && this.container.isTree)
              this.txtLyrOn.left = fullImgSize;
        this.txtLyrOn.document.write(this.htmStrOver);
        this.txtLyrOn.document.close();
        this.txtLyrOn.visibility = "hide";

        ...
    }
    else {
        ...
    }
}

So, whereas previously we had the single layer:


  txtLyr

We now have two:

  and  
  txtLyrOfftxtLyrOn  

They reside in the same space:

Only one of the text layers is visible at any one time. In the item's idle state, the txtLyrOff layer is visible. When the mouse is over the item, the txtLyrOn layer is visible.

This visibility toggle occurs four times in our script.


Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column21/addendum10/5.html