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

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

Logo

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


The Navigator Menu Item Layer Scheme

Let's recap how we build menu items in Navigator.

Every item is created using three positioned elements (layers). The item layer (gray) is placed within the containing menu layer (black), offset to create a bordered look. The item layer, in turn, contains two children layers: the text layer (red), into which we write and rewrite the item display text, and the dummy layer (green), which is placed on top to force the desirable arrow () cursor, and avoid the I-bar () cursor. See our discussions in addendum 6 and addendum 8.

Step-by-Step

  1. The Hierarchical Menus script (hierMenus.js) places the item layers within the containing menu layer:

  2. If an item has a child menu, the "more" image is placed in the item:

         

  3. The text layers are created. They are full size if the menu tree has only a parent menu, and narrower if the tree has child menus:

      or  

  4. The text layers are positioned within the item layers:

      or    or  

  5. Full-size dummy layers are created:

  6. The dummy layers are positioned within the item layers:

      or    or  

Now, where does the "tummy-rumbling" come from?


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/2.html