How do I use a menu in a Server-Side Include (SSI) file?
This is an advanced topic and we do not recommend you use this technique unless you are familiar with using include files and you know the configuration of the web server you are using.
The instructions assume you have read and understood the use of MenuMachine in normal GoLive pages.
Here are some guidelines for use of a menu in an include file:
- Create and edit the menu on a new blank page saved in your site. This will be the menu include page.
- Set the positioning options for the menu in the include page. The position of the menu in the include page will determine the position of the menu on the page.
e.g. if the menu is 200px from the top and 50px from the left, this is where the menu will be positioned on the final page. You cannot place the include inside a table or other element so the positioning must be correct on the include page.
Skip to step 4 unless you are using "Lock to image position".
- If you are using lock to image position, set up the menu normally according to the instructions in the MenuMachine documentation.
Then use these tips for your menu include page:
- Place the "lock" image on the menu include page and give the image a name attribute. Remember the EXACT name you gave the image. You will need it later!
- Lock the menu to the image using the MenuMachine Inspector.
- When you have finished editing the menu and you are ready to do the final save of the menu include page, delete the "lock" image.
The image should not be part of the include file. The menu is still set to look for and lock to an image with the same name on the final page.
- Place and name an image (use EXACTLY the same name as you used in the include) on the page that uses the include. The image can be placed anywhere on the page including inside a table and the menu will lock to it as long as you have named it correctly.
- Make sure all your menu links in the menu include page are absolute e.g:
root-relative: /pages/mypage.html
or
fully-qualified: http://www.domain.com/pages/mypage.html
This applies to the pages the menu items link to, as well as any images you are using in the menu items!
- Switch to source mode and do the same thing (make absolute) the MenuMachine links in the code (menumachine.js, spacer.gif, menutriangle.gif etc.)
NOTE: Menu include files cannot be edited using the MenuMachine Inspector. In the following steps, code will be stripped out to turn an HTML page into a text file that will be the "include" code.
You need to keep a "master" menu on a normal GoLive page so you can edit it. If you make changes to the "master" menu, copy and paste the menu code into the include file.
You should make a copy of the menu page now before you strip out the code that will prevent the menus from being edited.
- Go to the <head> section of the page in source code and move the
<bb:menulib>...</bb:menulib>
section down to just above where the MenuMachine <div> tag is.
- Remove all code that is not MenuMachine code from the page.
The <!DOCTYPE> declaration,
<html></html> tags,
<head></head> tags,
any <meta> tags
and <body></body> tags
must be removed.
You should be left with this:
<bb:menulib><script ...></script></bb:menulib>
<div id="bbML"...><bb:menu> ... </bb:menu></div>
- Save the file in source mode as menu.inc (note the .inc suffix). If you save in Layout view, GoLive will "manage" the links and change the references for the menu support files back.
- Close the menu include page and open the page which will refer to it.
- Set the page margins to 0px in all pages that will refer to the menu include.
- Include the menu.inc file in your pages just before the closing </body> tag:
<!--#INCLUDE FILE="menu.inc" -->
</body>
</html>
Note: You cannot position the include reference anywhere else. If the menu’s position on the page is not correct, you must go back to the menu include page and change the positioning settings in the MenuMachine Inspector. Then remember to only save in Source View and check that the paths are still absolute.
- The reference to the include file must not placed be inside any other elements (e.g. <table>, <tr>, <td>, <div>).
Also make sure there are no orphaned tags on your page.
- For server-side includes to work, the pages which reference the include file must have the correct filename suffix.
Usually for Apache web servers (the majority) this is .shtml.
If your server is running Microsoft IIS then you should rename the files with a .asp suffix.
Your pages must be saved with the correct extension to be parsed by the SSI handler on the server.
- Upload the file (including the .inc page and the pages which reference it) and check the pages in a browser. Make sure you have also uploaded the menu support files (menumachine.js etc.) and that the pages correctly link to them.
- Server-side includes have to be processed by a server that supports includes before they will display. You will not be able to view the pages locally unless you have a local web server set up and you are viewing the pages by entering your local IP address in the web browser using the http:// protocol.
|
