Mini Menus Macromedia Dreamweaver Extension

Using includes for the MiniMenu system

You can use SSI's ( server-side includes ) for the MiniMenu system very easily. The following steps will show you how to do this. Basically what we will be doing is create a Dreamweaver document for our menu. This page will serve as our "template" for the include. After we have the menu system as we want it we will simply copy the code into the include file. ( which needs to be in the same folder as this page ). Then we link the include to all of the pages that will use the menu.

There are a few other steps to consider so we will go into these as well.

Step 1 ( preparing a workpage )

Open and save a new Dreamweaver document where your include file will reside. For this tutorial we have named it ( MiniTemp.htm ) This page will serve as your include template. It will not actually be used for your site but will serve as the code to copy and paste to your include file. If you make any changes to the menu you will re-copy the new code from this file into the include file which will then update all of the pages using the include. So keep this file, do not delete it.

Step 2 ( creating the include file )

Open a program such as notepad and save it as a text file in the same folder as the Dreamweaver HTML page you just created. For the purpose of this tutorial we have name this text file ( minimenus.txt ).

Step 3 ( building the menu )

On your Dreamweaver document ( MiniTemp.htm ), open the MiniMenus interface and make the selections as you want them and insert your menu. Getting it exactly how you want it before copying the code to our include file will save work.

You should also determine how many subs you will be using, Change the default null links with the real links of your own and set the proper URLs to the subs links.

Preview in a browser from time to time and test the links in all of the subs.

Step 4 ( copying the code to the include file )

Once you are satisfied with you menu open the ( minimenus.txt ) file. Then go into code view of the MiniTemp.htm file, select and copy all of the main buttons and subs <divs>.

The main buttons divs code starts like this.. <div id="minibuttonh1" etc...

The drop subs divs code starts like this.. <div id="minidrop4" etc...

Do NOT copy the closer div ( <div id="minidrop0" ). Leave it inside the MiniTemp.htm page.

Step 5 - ( Adding the code to the include )

Paste the button and sub div code you copied from the MiniTemp.htm page into the minimenus.txt file and save the minimenus.txt.

You now have the relevant menu components into your include file. All that is left to do is create your other pages and link the include ( and the javascript and CSS files ) and add the menu closer to the new pages.

Note, once you added the menu closer and linked to the external files, this portion should not have to be repeated, Once they are linked to, any maintenance will be in the include file only. This is the beauty of includes.

Step 6 - ( Linking to the include )

Create your other HTML documents and save them where they are supposed to be in your site. Open the pages one by one and paste the link to the include into the <body>. The include link should look like the example below...

The important thing here is to make sure the path to the include from your page is correct. If it is not correct the menus will not appear in the page. If your not sure about the correct path you can place some temporary text on your page and in the Property Inspector make a link to the MiniTemp.htm page. Then copy its path to the include. The link to the MiniTemp page may look something like the example below..

Example: <a href="../../MiniTemp.htm">them</a>

The path is ( ../../ ). Now place this in front of the minimenus.txt in the include link and you will have the correct path.

Step 7 - Linking to the javascript and CSS files.

The MiniMenus need the javascript code to operate. These files reside inside a folder named ( mmenu_assets/style1 ) inside of the root of your site. The style1 may be style2 or style3, depending on the style you have used for your menu. Inside of this folder are 2 more folders named v and h.

From your MiniTemp.htm page copy the link to the javascript and CSS file and paste them into the document you are working on.

There may be 2 CSS files depending on if you are using a Theme or not. Here is what the links look like.

To determine the correct path for these external files is the same as you did with the include file ( by using a temporary text link on your page ) except you will browse to the folder from the ( mmenu_assets/style1 ) folder. The important thing here is to make sure you select the correct "menu orientation" folder inside the ( mmenu_assets/style1 ) folder. The h folder is for a horizontal menu and the v folder is for a vertical menu.

The paths only for this example look like this..

../style1/h/
../style1/h/
../style1/h/

This is the path you would use for your links.

Step 8 - ( The closer div )

In the new pages you are working on will need the closer div. This div contains a miniMenus js event to close the subs and return the persistent button to its normal state when the subs are moused off.

From your MiniTemp.htm page, copy the entire closer div ( <div id="minidrop0" etc.. ) and paste it into the <body> of your new page(s). You will need to set the correct path to the closer.gif in this div. The path will be the same as the ones you have done for the links above.

Example: <img name="minibut0" src="../style1/h/closer.gif"

Step 9- The image preloader

You will need to copy from the <body> tag of your MiniTemp.htm page the onLoad event to preload your images. The preload looks like this..

<body onLoad="preloadImages(6)" etc..

Copy and paste the preload event to your new pages <body> tag. The portion you need is this ( onLoad="preloadImages(6)" )

Step 10 - The Persistent Button

If you are using a persistent button for your pages you will need to add a piece of code to the <head> of each new page to set the persistent button. Normally this is determined from the MiniMenus interface but since we are using an include this step must be done if you are using a persistent button.

Here you will need to add the path once again to the image in the code above. Also make sure the button image is the correct number.

mmenu1_over.gif

mmenu2_over.gif

mmenu3_over.gif

This will depend on the persistent button number.

Then add the following to the onLoad event that you just copied. Make sure you plave a semi colon ( ; ) between the events as in the example below.

onLoad="preloadImages(6);setSrc('minibut1')"

If the pages persistent button is the first button the "argument" in the onload event will be ( minibut1 ). If button 2 is the persistent button the argument will be ( minibut2 ) and so on..

Future changes

If you need to make changes to your menu in the future you can use the interface on the MiniTemp.htm. Then copy and paste the new changes into the include file. If your pages have not changed location in your site you shouldn't even have to open them up for the changes to take affect.

In summary

Setting up a site to use includes is like many things in web design. It takes a little time to do it the first time but once it is done, maintenance or updates are very simple and quick. All that needs to be modified is the include file and all of the pages using it will be changed. A real time saver.