Example on how to place your menu exactly where you want inside your page


content here

I want the menu to appear at "Top-Left" of the <td> below:
content here
content here
  
content here

content here
content here
content here

(resize the window to see that the menu stays there no matter what you do)


How I place the menu at the Top Left corner of the <td>:

Assumptions: Because I use multiple menus in my website I compiled this menu under a custom filename "mymenu.js". You do not need to change the default "menu.js" name in your projects.

 

Positioning Step 1: I first make sure that the "Relative to an Element" value is selected on the AllWebMenus <Positioning> property of the Main Menu Group, before I compile the menu:

I also choose to anchor the "Top Left Corner" of the menu to the "Top Left Corner" of the <td> area. Note that the "Default ID" uses the filename that I selected for the compiled menu. I will need this ID in Step 2 for final positioning.


Positioning Step 2: Assuming that I already compiled and linked the menu to the page, I add the following parameter to the <td> tag:

<td id='awmAnchor-mymenu' width="450" height="44" bgcolor="#0066CC"> &nbsp;</td>

This parameter positions the top-left corner of the menu on the top-left corner of the <td>. If I wish a different positioning result I can always choose different matching corners for both the menu and the <td> element , as well as different Offsets, through the AllWebMenus <Positioning> property (see next example for this).


Why 'awmAnchor-mymenu'? Why this particular name?

Please view the html source of this page. Go right below the <body> tag and find the AllWebMenus menu-linking section (this is where the menu-linking section should always be). You can see that the name of my particular compiled menu is mymenu (as I chose in Compile Properties). If you use a different name then you should use this different name inside the awmAnchor ID.


Notes:

1. An alternative way to achieve exactly the same positioning result is the following:

<td width="450" height="44" bgcolor="#0066CC">

<span id='awmAnchor-mymenu'>&nbsp;</span>

</td>

2. Do not use extensions, such as ".js" or ".awm" inside the id variable.
            correct syntax:      id='awmAnchor-mymenu'
            incorrect syntax:   id='awmAnchor-mymenu.js'

3. The menu floats over its area covering the existing content there, so make sure that you do not have useful information below the menu.

You can read more on the <Positioning> property and techniques by pressing "F1" while you have this property selected in AllWebMenus.

Next Example >

 

Created by Likno Software ©