You can use Lock to image position in a menu Component if the menu is to be placed in different positions on different pages in your site, or if the menu must move to line up with a table or element in a table when a browser window is resized.

NOTE: This is an advanced concept. Before attempting to use MenuMachine's Lock to image position feature in your menu Component, make sure you have read and understood the manual page: Menu in a Component.

Using Lock to image position in a Component requires advanced knowledge of GoLive and MenuMachine. This should only be attempted if you:

1. have succesfully tested MenuMachine's "Lock to Image Position" on individual pages;

2. understand the importance of using a GoLive site file correctly; and

3. have succesfully used Components before.

If you are not familiar with using Components, you should test normal Components (without menus) and then a Menu in a Component first so that you understand the file and link structures in your site.

On this page:

Example - Menu Component using "Lock to Image Position"

Troubleshooting - Menu Component using "Lock to Image Position"

Example:

I want to use MenuMachine in a GoLive Component to make updating of my site simple, but on my web pages the menu needs to:

a) sit in a table or floating box and/or
b) be in different positions on different pages.

In the Component page you should only have the menu object and one image object. Placing the menu in a table or floating box in the Component will cause problems later.

Solution:

By using the Relative menu positioning feature Lock to Image position you can control where the menu will position itself in the pages that you place the Component into. E.g. you can 'lock' the menu to an image that has been placed in a centered table so the menu always lines up with the table even when the browser window is resized.

See a sample page using 'Lock to image' here.


The detailed procedure for producing the above example is explained below.
These steps MUST be followed correctly for this to work.

NOTE: You should only ever work on pages when the site window is open. If you work on a page without the site open, links will be written incorrectly.

1) Open your site and a locate or create a page with just a menu on it. Save the page into the Components folder. (Located in the .data folder (GL6.x) or web-data folder (GLCS) of the site structure or visible in the right pane of the site window under the Site Extras tab > Components).

 
2) Place the 'lock to' image on the Component page. (e.g. a transparent gif). In the image below, you can see that the image and menu are the only two objects on the page. The floating box placeholder () must be the last element.

Note: This is not the 'real' image that the menu will lock to. The menu will lock to the 'real' image in the page the component is placed onto. The Name of the image will be the important thing. (Not the actual name of the image file e.g. spacer.gif, but the name you assign in GoLive.)

 
3) Name the image using the inspector. Do not use spaces or non-alphanumeric characters except (_) underscores. Do not use a number as the first character.

GoLive CS:		GoLive 6.x:
Go to the Inspector > Basic tab > Name / ID field. Choose Name from the pull-down list next to the field. Type in the name (e.g. lockimage).		Name the image using the Inspector > More tab > Name field. Type in a name (e.g. lockimage). (Do not check the Is Form box.)

Note: It does not matter where the menu or image are placed at this stage. The position of the menu will be set in the final page by the location of the 'real' image in that page. You can place the menu on the Component page anywhere that will be convenient when you are working on the final page.

IMPORTANT: The menu and the image are ALL that should be on the Component page. Do not put any tables, floating boxes or other elements on the page.

 
4) Now go to the MenuMachine Inspector > Options tab and check the Lock to image position checkbox. Select the named image from the pull-down list.

 
7) Open the page that the Component will be placed onto (the destination page).

Do not place the Component yet!

Place an image on the destination page and name it EXACTLY the same as you did on the Component page. The image MUST be placed first otherwise GoLive will detect two identical image names (one name brought in by the Component and the one you try to name on the page) and will change one of them, thereby breaking the 'Lock to image position' behavior.

In the example below, a small centered table has been placed on the page. An image is placed in the top-left cell. The image is Named "lockimage" just as the other image was. It can be a different image, but the Name attribute must be identical.

The menu will lock to the top-left of this image even as the browser window is resized and the table changes position.

 
8) Once you have your page set up correctly, bring in the Component.
Do not drag a generic Component object onto the page and use Point and shoot to locate your Component as GoLive sometimes creates incorrect paths using this method with Components.

Instead:

GoLive CS:		GoLive 6.x:
Go to the Window > Library > Components button > your.site folder. Drag the correct file onto the page.		Go to Window > Objects and select the Site Extras button. Choose Components from the drop-down list in the bottom right. You will see your component page/s as icons. Drag the correct icon onto the page.

 

 
9) You should drag the Component as near to the end of the page as possible. The Component placeholder (black rectangle with green upper left corner), does not indicate where the menu will sit, but it does indicate where the menu's code will be in the source code. It is important that the menu's code is the last object on the page (except for template tags <!-- #EndEditable --> which are commented out anyway). The Component should NOT be placed inside any <div> tags, in a table or floating box/layer.

Note in the image below:
a) The menu does not look locked to the image. This will preview correctly in a browser.

b) The Component placeholder looks empty and is at the base of the page.
This is perfectly normal and correct.

 
10) Use the Special menu > MenuMachine > Fix Object Nesting (MMv1.6 and earlier) or Fix Code Location (MMv1.7 and later) command after you have placed your Component to make sure the menu code is positioned correctly.

 
11) Save the page. Then you can preview the page in a browser to check it.

 
12) Once your menu is working and you are ready to upload, remember to upload the GeneratedItems folder so the MenuMachine support files are also uploaded.

By using the method detailed above, the menu will lock to any image you place on a page named EXACTLY the same as the image on the Component page. Any adjustments you make to the Component will update all pages containing the Component automatically.

The beauty of this method is that you can use one single Component page for the menu so any changes are updated throughout the site, yet you can position the menu differently on various pages, simply by putting the 'lock to' image in a different location.

See the result of the example page here.

Troubleshooting Checklist

Check the following if your menu doesn't preview in a browser.

1) Never change or move or save any files without your GoLive site open otherwise the .site file will not be updated and link errors will occur.

2) Save the Component page into the correct place in the site structure.

3) Make sure the 'destination' page (the page the Component will be placed onto) is saved into the same site.

4) Only put one image and one menu on the Component page. No tables or floating boxes!

5) Name the image on the Component page correctly.

6) On the Component page, use the MM Inspector > Options tab to 'Lock' the menu to the named image using the pull-down list.

7) If you a placing the Component into a Template page, make sure the Template is saved BEFORE placing the Component (GoLive CS)

8) Place the image on the destination page BEFORE you place the Component.

9) Make sure the Name of the image on the destination page is EXACTLY the same as the Name of image on the Component page.

10) Make sure you use the correct method to place the Component and it is placed at the END of the page.

11) Make sure the menu code is last, use the Fix Object Nesting/Fix Code Location command.

12) You can only Preview in a browser to see the correct location of the menu.

13) Always remember to upload the GeneratedItems folder when uploading your site.

For other Component troubleshooting problems, please also read the Basic Menu Component page.