|
The layout usually comes with a user menu already. Given that navigation menus are mostly used to show off the designer's talent, it is not always possible to convert them into BEE's online editable User Menu. For example, one cannot use BEE to online edit a Flash based menu. (The User Menu adaptation effort is usually one of the criteria to select appropriate layouts for Instant Website.) In this section, we assume the navigation menu is adapable.
User Menu:
These lines will generate many lines in the source files. To speed up the display, these lines should be placed close to the end of page as much as possible, but before the Menu JavaScript (which these lines define). You may need to customise the parameters to suit your needs. <bee tag="pt%usermenu" hndl="hd" menu="HorizontalDrop" schm="menu" root="mainmenu">
<bee var="sideMenuName" value="{pt%PageInfo:Param|if:'@value',{scheme%portal&DefaultSideMenu}}">
<bee tag="pt%usermenu" hndl="vs" menu="VerticalSweep" schm="sidemenu" root="{sideMenuName}">
The Menu JavaScript:
The JavaScript for the top level menu should be located at where the menu appears unless its position is absolute. All subsequent levels (2 or higher) can be at anywhere as they are always absolute. To speed up the display, please put absolute levels near the end of the page (but before </body>). <script language="JavaScript">
hdBuildMenuItemsAtLevel(1);
hdBuildMenuItemsAtLevel(2);
hdBuildMenuItemsAtLevel(3);
hdBuildMenuItemsAtLevel(4);
...
vsBuildMenuItemsAtLevel(1);
vsBuildMenuItemsAtLevel(2);
vsBuildMenuItemsAtLevel(3);
vsBuildMenuItemsAtLevel(4);
</script>
The "scheme" files:
The menu specification is specified in scheme%layout/newlayout/menu (or sidemenu). There are up to four levels of menu. L1 stands for Level 1, and the same for L2, L3 and L4. In the following list, only L1 is shown but all the variables are available for L2 to L4 as well (except for menuOffTimeout, which is level independent).
The menu is constructed as a table by the Menu JavaScript. Each item on the menu is either a cell (for horizontal) or a row (for vertical). In the following explanations, Menu Table means the table containing the menu items and it is a <TABLE> tag, Item Cell means the table cell containing the menu item and it is a <TD> tag for a horizontal menu. For a vertical menu, we call it the Item Row, which is a <TR> tag. (Please note that even for a horizontal menu bar, the submenus are still vertical.)
- menuOffTimeout - The time the sub-menu will disappear after your mouse move out (in milliseconds)
- L1:menuattr - The attributes for the Menu Table
- L1:menubegin - The first cell or row of the Menu Table (including the <TD> or <TR> tag)
- L1:menuend - The last cell or row of the Menu Table (including the <TD> or <TR> tag)
- L1:itemattr - The attributes of the Item Cell or Item Row.
- L1:itemseparator - The cell or row between two successive Item Cells or Item Rows.
- L1:itemwidth - The width of the Item Cell (default is 100)
- L1:itemheight - The height of the Item Cell (default is 20)
- L1:namebegin - The text before the Item Name and is part of the link
- L1:nameend - The text after the Item Name and is part of the link
- L1:offsetleft - The horizontal displacement of the Menu Table in pixels (default is 0)
- L1:offsettop - The vertical displacement of the Menu Table in pixels (default is 0)
- L1:embossleft - The attributes of the left edge column of the Menu Table
- L1:embossbottom - The attributes of the bottom edge row of the Menu Table
- L1:embossright - The attributes of the right edge column of the Menu Table
- L1:embosstop - The attributes of the top edge row of the Menu Table
- L1:position - "absolute" if the position is independent of where the Menu JavaScript is defined (default) or "relative" if otherwise.
The most tuned parameters are menuattr, offsetleft and offsettop. Other more tuned parameters include itemwidth and itemheight. "menuattr" is usually "class=..." so that you can then tune if from the stylesheet.
|