Using a menu in a GoLive Component

Using a MenuMachine menu in a GoLive Component is a good way to be able to update your menu on only one page and have the changes appear automatically on all the pages that reference that Component.

(If you are unfamiliar with GoLive Templates and Components, please read this page first.)

A Component is set up like a normal web page, but is saved into a special location in your site folder structure in order for GoLive to recognize it as a Component and allow you to use it in the correct way. See this page for information on where to save the Component page.

A Component is placed into another page (carefully following the instructions below for the correct way to do this) – it becomes like a special 'snippet' of code on another page. You don't create pages from it as you do with Stationery or Template pages. If a Component page is edited, the whole Component code segment in the pages the Component was placed into will be updated but the rest of the page is untouched.

If you want to know more about Components, consult your GoLive manual or GoLive Help menu.

To set up a menu Component that can be placed on multiple pages in your site, you must follow these steps carefully.

1) Open an existing GoLive Site or create a new Golive Site. If you are unfamiliar with using GoLive sites, read this.

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.

In the left pane of the site window, create a new page or select an existing page. In the image below, a file called "menu.html" has been created.

2) Open the page in Layout view and place a single menu on it. There should be nothing else except one menu object on the page.

3) Set the page margins to 0px. (Click here if you don't know how to do this.)

4) You need to move the menu to the SAME location you want it to be positioned in on the destination page. For example, if you need the top-left of the menu to be 20px from the left edge of the page and 100px from the top of the page, manually move the menu into this position in the Component page. You can always change this later so don't worry if it isn't exact now.

You can also at any stage edit the menu (add the menu items you want but don't put in the links yet).

You move the menu into position by selecting the menu's floating box/layer and then:

a) Typing the coordinates into the Horizontal and Vertical Position fields on the toolbar (top-left in image below); or

b) Dragging or nudging the floating box/layer (as indicated with the dragging-hand icon); or

c) Typing the coordinates into the Inspector (GL6) or Layer Inspector (GLCS) as seen in the image below at right.

5) If you want to use MenuMachine's Relative Positioning features, set these now. For example, we have set the menu below to scroll to a position 20px from the top of the page. (If you want to use "Lock to image position" you must read the page which describes how to use "Lock to image position" in a Component.)

6) Once you have the basic menu set up, you can save as; or close and move the page into the Components folder. The Components folder is 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).

If your page does not appear here, check that it has been saved into the correct folder (the .data > Components folder (GL6.x) or web-data > Components folder (GLCS), then select the right-hand site window pane and use the Refresh view button on the GoLive toolbar to get the .site file to update the window.

Also note in the picture above, the GeneratedItems folder has been created at the root level of the site. This happened when the "menu.html" page was saved. The GeneratedItems folder contains the support files the menu needs to work correctly. This folder must be uploaded when the site goes live.

7) Now that the menu Component is set up, you are ready to place it on a page in your site.

Locate a page which is already saved in the site that the Component will be placed onto (the destination page). Open the destination page and make sure it is in Layout view.

To place the Component onto the destination page, follow these instructions for your version of GoLive:

GoLive CS:

GoLive 6.x:

Go to the Window > Library to open the Library palette.

Click on the Components button.

Locate your.site folder. Turn down the disclosure triangle to see all the Components in your site.

Go to Window > Objects to open the objects palette.

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.

Note: 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.

8) From the Library (GLCS) or Objects (GL6) palette, you should drag the Component as near to the end of the destination page as possible.

(The picture below shows the procedure in GL6 but GLCS is the same except you drag from the Library palette instead of the Objects palette.)

Once placed in the page, the Component placeholder (black rectangle with green upper left corner in image above), does not indicate where the menu will sit, but it does indicate where the menu's code is located in the source code.

It is important that the menu's code is the last object on the page (except for template tags  which are commented out anyway).

The Component should NOT be placed inside any <div> tags, in a table or floating box/layer. Make sure the paragraph you have dragged the Component to does not have any alignment settings (look at the alignment buttons in the toolbar, they should be de-selected).

Note in the image above:
a. The menu is sitting where we set it to in the Component i.e. 20 px from left and 100px from top.

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

9) If you are unsure if you have dragged the menu to the correct position, you may use the Special > MenuMachine > Fix Code Location command after you have placed your Component to make sure the menu code is positioned correctly.

10) Save the destination page while in Layout view. Then you can preview the destination page in a browser to check it. (GoLive 6 will not show the menu in Preview mode, you must preview in a browser.)

11) Making changes to your menu Component will update all pages that use the Component.

E.g. If you follow the steps above, the menu will be in the same position on the destination page that it is on the Component page e.g. 20 px from the left, 100 px from the top of the page.

If the menu position is wrong, DO NOT change the menu's position on the destination page!

If you need to adjust the menu's position, open the Component page in Layout view and move it as in Step 4) above. You must re-save the page for updates to occur to pages that the Component has been placed on.

If you need the same menu on many pages, but not always in the same position, you must use "Lock to image position" in the Component or use multiple menu Components.

Once the menu seems to be working correctly, you can open the Component and apply your link URLS to the menu items and use images for menu items if applicable. (Note: Menu images should NOT be saved in the Components folder.)

You can keep going back to the Component at any time and make adjustments to the menu. Saving the Component will prompt GoLive to update all pages that the Component has been placed onto.

IMPORTANT notice about Component Updates:

Any adjustments you make to the Component will update automatically all destination pages containing the Component IF:

a. The .site window is open; AND

b. You save the Component in Layout view; AND

c. Pages which use the Component are also open in Layout view or are closed.

You will only see pages appear in the update list if they are closed. Pages that are open in Layout view will update but will not appear in the updates list.

Read this page for more Component Update information and how to fix the update if all pages weren't updated correctly.

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

The Component page itself is not uploaded. Only the files in the left pane of the site window are uploaded. If your menu uses images, they should be stored in the site with your other images and pages in the left pane - NOT in the Components folder.

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.

1) Make sure the GoLive site is open. 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. Only work on pages which are already created and saved in the site. Unsaved pages may not work correctly.2)

2) Only put one menu on the Component page. No tables, images, or floating boxes!

3) Set the page margins to 0px for both the Component and the destination page.

4) Move the menu to the correct location in terms of distance from top and left of the page in the Component. The position of the menu in the Component dictates where the menu will be located on the destination page.

6) Save the Component page into the correct place in the site structure. The page should be in Layout view whenever you save.

7) Locate the Component in the Library palette (GLCS) or Objects palette (GL^) in order to drag the Component onto the destination page.

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

11) Be careful when changing and saving Components so that updates occur correctly. Close all pages or make sure they are in Layout view.

12) Always remember to upload the GeneratedItems folder when uploading your site. Make sure any images in the menu are NOT in the Components folder and they are also uploaded.

If you need to have the menu lcok to an image (e.g to make the menu appear as if it was placed inside a table) there is another tutorial here.

There is a problem in GoLive CS that occurs when Components are placed directly in Templates. Basically, GoLive is neglecting to notify extensions about the link change when the Template file is saved, which means the links are not updated correctly. This only happens if you place the Component in a new Template, before saving the Template itself.

You can work around it by ensuring that you save the Template page *before* placing the Component in it. This will allow MenuMachine to build the correct links initially instead of using the temporary file:// links. This works successfully to maintain link integrity.

When you open a Component, Template or Stationery page, remember that you are accessing a page which is OUTSIDE the root folder (or should be if your site structure is correct).

Because the page is outside the root directory, when you put an image on the page, or make a link to another page either inside your menu or not, the link will look a bit strange. It will start with "../../Yoursitename/etc".

For example, a Component page has a path like this:
/site_folder/web-data/Components/component_page.html

It has to look back up to the site_folder and then go down through it to find the image or link inside the site.

Don't panic and don't change the links manually. GoLive is managing the links correctly. If you manually edit the link, or change anything OUTSIDE of GoLive, the links will fail.

When you create a file from a Template page, or place a Component onto a page, the GoLive .site file manages the links properly and you will notice that the links on the new page (which is saved inside the root directory) are correct.

BUT, due to a bug in GoLive Stationery link handling, your links may not be corrected in this way if you create a file from a Stationery page. You have to open each page that is created from Stationery, make a slight change (like add some text then delete it), then save the page to get the links to update properly. Otherwise you may be left with the link from the Stationery folder which will be wrong. Remember, edits to a Stationery page are not propagated to pages already created from it. You may as well just have a 'master' page in your root folder that you duplicate. It has the same effect but the links will be correct!