BBY Menu Instructions

UPLOADING THE MENU FILES

1. Unzip the files onto your hard drive, maintaining the file/folder structure. You'll find:

menu.txt
externals/bby.css
externals/menu_scripts.js
images/header.jpg
images/menu_end_left_sml.gif
images/menu_end_right_sml.gif
images/butn_home.gif
images/butn_home_on.gif
images/butn_order.gif
images/butn_order_on.gif
images/butn_titles.gif
images/butn_titles_on.gif
images/butn_excerpts.gif
images/butn_excerpts_on.gif
images/butn_faq.gif
images/butn_faq_on.gif
images/butn_about.gif
images/butn_about_on.gif
images/butn_contact.gif
images/butn_contact_on.gif
images/back_dropdown.jpg

2. Create a directory underneath the top level of your site called "externals" -- then, upload the following files to that directory:

bby.css
menu_scripts.js

EXPLANATION: These files contain the CSS stylesheet info (fonts, colors, spacing, borders, etc.) and the menu DHTML/javascript code used to run the menu system.

3. Upload the following file to the top level of your site:

menu.txt

EXPLANATION: This is the menu code that will be included in your site pages via SSI.

4. Upload the images into your image folder, which ideally is in a directory one level below your root directory. (If it isn't, you'll need to change some of the links in the code.)

EDITING YOUR PAGE(s) TO INCLUDE THE MENU, CSS AND SCRIPT FILES

1. First, in the <HEAD> section of any page where you wish to place your menu, copy and paste the following lines of code:

This code can go anywhere between the <HEAD> and </HEAD> tags; I recommend putting it right before the closing </HEAD> tag so it's easy to find.

2. Now move to the <BODY> tag. Within this tag, iIn addition to whatever else you may have there, copy and paste the following code:

onLoad="P7_autoHide('drop1','drop2','drop3','drop4');MM_preloadImages('/images/butn_home_on.gif',
'/images/butn_order_on.gif','/images/butn_titles_on.gif','/images/butn_excerpts_on.gif',
'/images/butn_faq_on.gif','/images/butn_about_on.gif','/images/butn_contact_on.gif')"

For example, your BODY tag may look something like this:

<body bgcolor="#FFFFFF" text="#000000" onLoad="P7_autoHide('drop1','drop2','drop3','drop4');MM_preloadImages('/images/butn_home_on.gif','/images/butn_order_on.gif','/images/butn_titles_on.gif','/images/butn_excerpts_on.gif','/images/butn_faq_on.gif','/images/butn_about_on.gif','/images/butn_contact_on.gif')" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

As mentioned in the "uploading" section, the image links such as ('/images/butn_home_on.gif') assume that your images are all placed in a directory just below the top level of your site. If your hierarchy is different, you'll need to change these references appropriately.

EXPLANATION: The "audohide" code tells the document to close the dropdown layers when the mouse moves off them onto the page. The "MM_preloadImages" code preloads the mouseover images so that it takes less time for the mouseover animation to show up.

3. Finally, immediately beneath the <BODY> tag, add the following line:

<p></p>

EXPLANATION: This is the SSI command to include the file with the menu code. It will search for the menu.txt file in the root directory of your site.

To view an example of how your finished page may look, open up sample.html and view the code. Here is what you'll see:

<html>
<head>
<title>Sample Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="/externals/bby.css" type="text/css">
<script language="JavaScript" src="/externals/menu_scripts.js"></script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="P7_autoHide('drop1','drop2','drop3','drop4');MM_preloadImages('/images/butn_home_on.gif',
'/images/butn_order_on.gif','/images/butn_titles_on.gif','/images/butn_excerpts_on.gif',
'/images/butn_faq_on.gif','/images/butn_about_on.gif','/images/butn_contact_on.gif')">

<p></p>
<table width="600" border="0" cellspacing="3" cellpadding="3" align="center" bgcolor="#F9E8D6">
<tr>
<td>Your sample content</td>
</tr>
</table>
</body>
</html>

IMPORTANT EXTRA STEP THAT MAY BE NECESSARY

Usually, to use SSI you need to rename your documents with the extension ".shtml" so that your server knows that the page should be parsed for SSI. You can avoid this lengthy and annoying renaming process by tweaking your .htaccess file (a "hidden" file that can be found in your top-level directory).

Ask your webhost how to accomplish this; you may be able to do so through your hosting control panel, assuming you have one. If not, let me know and I'll give you the steps.