|
There are many possible menu designs, such as the "Horizontal Drop" and "Vertical Sweep". The following code is an illustration of the "Horizontal Drop" menu bar with multi-level drop down submenus:
REUSE ME {code}
The above BEE section produces no visible output. Instead, it defines a set of JavaScript variables and functions to operate the menu according to the parameters for the "doMenu". In another word, it is only the definition of the menu. The menu is built when the xxBuildMenuItemsAtLevel(1) JavaScript is called, followed by xxBuildMenuItemsAtLevel(2) and so on. (Note: xx stands for the menu object name.)
The location of the BEE "doMenu" and the JavaScript "xxBuildMenuItemsAtLevel" follow these rules:
- The order of occurance: BEE function actionMenu, JavaScript function call xxBuildMenuItemsAtLevel(1), xxBuildMenuItemsAtLevel(2), ...
- If L1:position is "relative", xxBuildMenuItemAtLevel(1) needs to be in the encapsulating construct.
- If L1:position is "absolute" (default), xxBuildMenuItemAtLevel(1) needs to be out of any construct.
- xxBuildMenuItemAtLevel(2) and onwards should be in absolute position and therefore must be out of any construct. (Overwriting Ln:position with "relative" is a no no if n >= 2.)
When L1:position is "absolute" (default), the ideal position for doMenu and the xxBuildMenuItemsAtLevel sequence is near the end of the page before </body>. This design gives priority to the visible part of the page, leaving the background menu building till the end. This will give an overall impression of speedy display. (Yes, the menu appearance will be delayed but in most cases the delay is hardly noticable.)
However, when L1:position is "relative", the xxBuildMenuItemsAtLevel(1) (the top level menu) must be in the encapsulating construct (e.g. a table cell). Since the menu object creation and the doMenu call must be before the first xxBuildMenuItemsAtLevel, they must be moved up front as well (but after <body>).
Note: Some old platforms (notably IE on Windows 98) cannot handle L1:position = "relative". It is advisable to use the default (absolute) if the website is expected to be viewed from old operating systems.
|