The Behaviors

There's 4 behaviors which make up the Menu Tools package. Please note these behaviors can only be installed on FrontPage 2003 - behaviors are not supported on earlier versions.

Download and Install

You can download the latest versions of the individual behaviors below or download a zip file containing all four behaviors here.

Once you've download extract the 2 files for each behavior to your
%userprofile%\Application Data\Microsoft\FrontPage\Behaviors\Actions
folder (where %userprofile% is the file path to your  Documents and Settings folder).

If you already have previous versions of the behaviors just over-write the exisiting behavior files. If you have any pages that use the Swap and Restore Link Class behaviors you'll need to delete and reapply the behaviors as the script is completely changed.

If you have FrontPage open you'll need to close and restart to load the new behavior. After you've restarted you'll notice a new entry on your behaviors menu Menu Tools. This entry will contain the four behaviors Open Menu, Close Menu, Swap Link Class and Remove Link Class. Note that Open and Close Menu will be greyed out unless there's at least 1 layer on your page and Swap & Remove Link Class will be greyed out unless there's at least one link on your page.

Tutorials

You can jump straight into this tutorial on building a simple dropdown menu.

The Open Menu Behavior

As it's name implies this behavior will open a sub menu - you'd apply it to a menu button or link and it will open the selected sub menu if another menu is currently open on the page it will be closed. The behavior is smart enough to remember the current open menu and ensure only one menu is ever visible at a time. To apply the behavior choose the menu you'd like to open and hit OK.

The Open Menu Interface

The interface is fairly simple - all you do is choose the sub menu (layer) you'd like to make visible and hit OK. The behavior will automatically close any other menu that may be open on your page.

The dropdown list will show all the layers currently on your page with the exception of a layer having the ID "closer" - this layer has a special purpose which is explained in the tutorial.

The Close Menu Behavior

This behavior will close the currently open menu - there's no options just hit OK to apply the behavior.

The Close Menu Interface

There's really nothing to explain here - just hit OK to apply the behavior

The Swap Link Class Behavior

In a couple of the examples I've used CSS links rather than images to build a menu. This behavior will apply a class called over to a link and remove the over class from any other link on the page You'd apply this behavior when you open a sub menu. To see the behavior in action look at this example, or this one. Notice in both of these examples when you mouseover a button to open a sub menu the link keeps a hover state while the sub menu is open.

You'll need to  create a class called over in your stylesheet before using this behavior. Of course you can choose any fonts/colors etc you like - a simple rule might look like this

a.over{
color:red;
}

The Swap Link Class Interface

There's no options to choose - just hit OK to apply the behavior. Of course the behavior can only be a applied to an A tag.

The Remove Link Class Behavior

This behavior will remove the CSS class called over from any links on your page

The Remove Link Class Interface

Again no options to choose - just hit OK to apply the behavior.

Browser Compatibility

The Open and Close Menu behaviors will work on all version 4 and better browsers (including Netscape 4) on PC and Mac platforms.

The Swap and Remove Link Class behaviors will work on all modern browsers, IE5+, Netscape 6+ Mozilla, Firefox etc. The behavior will degrade gracefully on older browsers.

Examples

Using these behaviors  you can build three different types of menu

Vertical Flyout - The menu is arranged vertically along the left of the page. The example here also uses my CSS behavior.
Example

Horizontal Dropdown - This is probably the most common type of menu. The buttons are arranged horizontally along the top of the page the example also uses the stock FP swap image behavior to add JavaScript image rollover effects.
Example

Horizontal Strip - This is an alternative horizontal menu, the example also uses my CSS behavior to make an imageless menu
Example