Method 1: Edge-Relative Positioning (default):
The menu is positioned at an X,Y position on the browser window according to the three properties below:
<Position Relative to>
<Horizontal Distance from Edge> (the X coordinate)
<Vertical Distance from Edge> (the Y coordinate)
Most users prefer to use this edge-relative positioning because it is simple and requires no extra code inside the HTML pages. This is an efficient solution, especially if your menu needs to be positioned relative to the Top-Left edge (most typical case), as this particular edge is not affected by window resizes or scrolls.
Method 2: Positioning relative to a Page Element:
The menu uses an invisible page element to position itself. You just need to add the following element at the exact position where you want your menu to appear:
| <style>.awmAnchor {position:relative}</style><span id='awmAnchor-menuname' class='awmAnchor'></span>
|
|
|
For example, if your compiled menu is "mymenu.js", you should use the following code:
|
|
| <style>.awmAnchor {position:relative}</style><span id='awmAnchor-mymenu' class='awmAnchor'></span>
|
Do not use the .js or .awm extensions there! Note that the <span> element is a floating element and does not occupy space on the page. This is why it is advisable to use the <span> element inside a table cell with specified dimensions that match the Main Menu area.
The best way to understand how to use this positioning method is to view our on-line example at:
http://www.likno.com/examples/example_positioning.html
How this method works:
By default, the menu positions itself using its Edge-Relative Positioning values (see Method 1), unless its <span> element is detected somewhere in the page.
In this case, the menu ignores its internal Edge-Relative Positioning and matches its top-left corner with the top-left corner of the <span>. If you want to match a different menu corner with the <span>, please read the paragraph "Advanced issues: How to select a different matching corner for the menu" following below.
Remember that the menu is always floating. It appears over the page contents, not inside them. It does not push other elements away; it just covers them. Therefore, for the Main Menu not to cover other page elements, you should insert the span tag into a table cell, allowing enough room for the Main Menu to appear. You can view an on-line example about this at http://www.likno.com/examples/example_positioning.html
Alternatively, you can force the <span> element to occupy space on the page using the following syntax:
| <style>.awmAnchor {position:relative}</style><span id='awmAnchor-menuname' class='awmAnchor'><table width=XX height=YY><td></td></table></span>
|
where the XX and YY define the area that you want your menu to occupy. Optimally, this area should match the Main Menu area.
Advanced issues - 1: How to achieve exact positioning in all browsers:
Depending on your HTML structure in your pages, some browsers may render the menu in a slightly different position than others (some pixels off). If this occurs, you can easily fix it by using an awmOffset variable for these particular browsers you want to adjust the positioning for.
This advanced feature is best described at the HELP section for the Tools -> Compile Properties -> Advanced Scripting option.
Advanced issues - 2: How to select a different matching corner for the menu:
The default positioning behavior is to match the top-left corner of the menu to the top-left position of the <span>. This may not be appropriate if you want to position the menu based on its top-right corner, or if you want to center the menu at the <span> position. To change the anchoring position, you can go at Tools-> Compile Properties -> Advanced Scripting and enter the following variable there:
awmRelativeCorner=X;
..where X denotes the corner of the menu where the span will be positioned:
Note: there is no need to use this feature for awmRelativeCorner=0; if you just want to have the default positioning behavior (i.e. top-left corner of the menu matches the <span> element).
Important Note: Do not try to place the menu on the page by moving its "HTML menu-linking section" from the end of the page. Instead, use the <span> element technique to achieve this.
See Correct Placement of HTML menu-linking section"" for more info on why the position of the menu-linking code is irrelevant from the actual position where the menu will appear.
Note 2: Netscape is case-sensitive. Therefore be careful to use the correct capitalization for "menuname". For example if your menu is called NavBar.js, then you should have 'awmAnchor-NavBar' inside the span element (not 'awmAnchor-navbar').