Property:  Positioning

To specify the positioning of your menu, edit the <Positioning> property located at the Main Menu group.

There are two methods to position your menu on your pages:

Method 1: Automatically show Main Menu on page load

This method is the default and most frequently used method for positioning your menu (i.e. the Main Menu group).

You can either position your menu relative to the browser's window or relative to any page element (table, image, link, div, etc.) you choose.

Attaching the menu to the browser's window

This is the easiest positioning method as no extra code is required on your pages (apart from the required menu-linking code). It is an efficient solution when you want to position your menu relative to the Top-Left corner of your browser (most typical case on left-aligned websites), as this particular corner is not affected by window resizes or scrolls and therefore the menu stays fixed at the specified offsets. All you have to do is specify the Offsets X and Y and the menu will appear at that distance from your selected Window corner.

Attaching the menu to a selected page element

This method requires that you add extra code on page but gives much more flexibility and covers all positioning needs, as shown on the example below:

       (visit http://www.likno.com/examples/example_positioning.html to see the example)

 
Attaching the menu to a page element is easy to do:

1. First make sure that the "Element" value is selected at the AllWebMenus <Positioning> property before the menu compilation (fail to do so will make your menu appear at the "Window-related" offsets for some milliseconds and then jump to the element position).

2. Edit your HTML page

3. Choose the element where you want your menu to appear

4. Add the following parameter on the element's tag:

id="awmAnchor-menu"

where menu should be the actual name of your compiled menu (without the .js extension). If your compiled menu is called "mymenu.js" the following code should be used instead:

id="awmAnchor-mymenu"

This is all you have do. When a user browses your page, the AllWebMenus script detects the element with the id parameter and shows the menu at the element's location. If the script does not detect the id, the menu will not appear.

Examples:

A menu (compiled as "menu.js") is attached to a table using the following code:

<table id="awmAnchor-menu" width="150" height="150" border="1">

The same technique applies if the chosen element is different, such as:

TD:

    <td id="awmAnchor-menu">&nbsp;</td>

Link:

<a id="awmAnchor-menu" href="#">Menu attached to this link.</a>

Image:

<img src="products1.gif" id="awmAnchor-menu">

DIV:

<div id="awmAnchor-menu"> &nbsp; </div>

SPAN (the most generic element):

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

Note that prior to AllWebMenus v4.1 the following code was used for positioning:

<style type="text/css">.awmAnchor {position:relative;z-index:0;left:Xpx;top:Ypx}</style>

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

It is ok to continue using the above code on your pages as it already contains the required id parameter for positioning.

In case you were using OFFSETS on version 4.0, please bear in mind that these OFFSETS are now passed into the menu.js file instead of the above positioning code. Therefore, in order for your OFFSETS not to be *double-counted*, please make sure that you remove the following code from your html pages:

<style type="text/css">.awmAnchor {position:relative;z-index:0; left:Xpx; top:Ypx }</style>

Note: Main Menu is floating - reserve space on your layout:

Remember that a DHTML 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 arrange for sufficient room on your layout so that the Main Menu appears there. For example, for an horizontal menu of about 440 pixels wide and 44 pixels tall, you could use the following HTML code:

<table> <tr>

<td id="awmAnchor-menu" width="440" height="44">

&nbsp;

</td>

</tr> </table>

You can view an on-line example about this at

Method 2: Manually trigger Groups as popup menus (PRO version only)

With this method you have the ability to make individual groups pop up by adding extra code on elements of your page. It is a very flexible method that can be used for achieving any of the following:

http://www.likno.com/examples/example_positioning.html

- Keep your entire menu hidden until an event occurs (eg: a menu popups when you put your mouse over an image or link). You can even replace the default right-click menu of your browser with your own menu! 

(see "How Do I, Replace the default right-click menu used by the browser" topic)

- Let actual elements of your page (images, links, etc.) be the ones that trigger the submenus instead of Main Menu items. In this case, you have total control of the layout of your page as you do not need to keep room for a rectangle where the Main Menu appears. You can even create cyclical menus with this method! View online example

In order to use this capability each group is assigned a unique id upon its creation. As shown on the following example, this id is enclosed in curled brackets and cannot be edited. The id of the Main Menu Group is gr0.

This id will be used inside your page on two locations for two different reasons:

1. to attach the group to a chosen element

2. to trigger the appearance of the group

For attaching the group to a chosen element (eg: an image) a technique similar to Method 1 ("Automatically show Main Menu on page load") is applied:

<img src="products1.gif" id="awmAnchor-menu-gr2"

onmouseover="awmShowGroup('menu-gr2',0,3,0,0);">

The difference here is that apart from the compiled menu name (eg: "menu") we also use a group id (eg: "gr2") to specify the particular group that is attached. Note that if you attach the "gr0" group then you attach the entire menu, as the menu is actually the Main Menu Group.

The triggering of the group's appearance is achieved by using the id on the second code section:

<img src="products1.gif" id="awmAnchor-menu-gr2"

onmouseover="awmShowGroup('menu-gr2',0,3,0,0);">

In this example, we specify that the group with id gr2 of the menu with compiled name menu should popup when the user puts the mouse over the image.

The other 4 values relate to parameters that are specified through the "ID and Trigger Code generator" launched by the following link:

The parameters are the following ones:

Group Corner

Element Corner

Offset X

Offset Y

There is also the "Trigger Event" parameter which produces the function onmouseclick instead of onmouseover to trigger the appearance of groups when the user clicks on the selected element.

Implementation Notes:

- The "ID and Trigger Code generator" does not have any effect on your compiled menu or on your pages but it only serves the purpose of providing the correct syntax of the code. It is your responsibility to add the provided code correctly on the page elements of your choice.

- As with the "Automatically show Main Menu on page load" positioning, groups can be attached to any element you like, such as images, links, table cells, divs, spans, etc.

- After a group appears, what makes it disappear again?"

By default, a popup group disappears (hides) when the mouse moves in and then out from its area. To keep the group open even if the mouse moves away from its area you need to set the <Sticky Submenus> property to "yes". In this case, the group will close only when the user clicks somewhere on the page or triggers a different popup group of the same menu.

In case you want to hide an open group without entering into its area first, you can trigger the awmHideGroup(); function that hides all open groups from the page, as shown on the example below:

<img src="products1.gif" onmouseover="awmShowGroup('menu-gr2',0,3,0,0);" onmouseout="awmHideGroup();">

- Prior to version 4.1, both triggering and hiding of menus was achieved by using the deprecated <Popup> property and  awmShowMenu(); / awmHideMenu(); functions. The awmShowMenu(); function has now been replaced by the broader awmShowGroup(); function so do not use it in your menu implementations anymore. If you used the awmShowMenu(); function in your existing implementations you may still keep using it as it still functions for backwards compatibility reasons.

- You can use the awmHideMenu(); function to hide all menus (groups) that are open on the page. The function can also contain the menu name as parameter awmHideMenu(menuname); in case you have multiple menus on page and you want to hide the open groups of a particular menu only. An example of using this function to hide a menu when passing over an image is the following:

<img src="products1.gif" onmouseover="awmHideMenu();">

- In the rare case that the AllWebMenus menu-linking code is not at the beginning of the page (as in FrontPage implementations for example), you will need to declare the awmShowGroup(); function (and awmHideMenu(); if used) in the HEAD section of your HTML page (between the <head> and </head> tags) as shown below:

<script>

function awmShowGroup(x,y,z,v,e){}

</script>

Information that relates to both Methods

Depending on your HTML structure of your pages, some browsers may render the menu in a slightly different position than others (some pixels off). In the rare situation that this occurs, you can easily fix this by using the Browser-specific Offsets feature, which is located at the <Positioning> property:

For each browser (or family of browsers) there are two variables that adjust the menu positioning horizontally (X) or vertically (Y) for that particular browser:

The following example shows how to use these variables:

Let's assume that Netscape 6 shows your menu 5 pixels lower compared to any other browser.

In this case you need to enter the value [ -5 ] to the Y Offset of the Mozilla, MS6.x+ category (this category should be used for the Firefox browser too).

This variable will force the menu to appear 5 pixels higher in Netscape 6 only, thus fixing the problem.

Important notes!

correct syntax: id='awmAnchor-mymenu'

incorrect syntax: id='awmAnchor-mymenu.js'

See also

Correct Placement of menu-linking code

How Do I, Replace the default right-click menu used by the browser