DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X (v3.10) | 5
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
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 | |
txtLyrOff | txtLyrOn |
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: https://www.webreference.com/dhtml/column21/addendum10/5.html