Tutorial

To demonstrate these behaviors we're going to build a vertical flyout menu using the Open & Close Menu behaviors. The exercise should take about 5 - 10 minutes. If you haven't already done so download the behaviors.

The Finished Menu

Have a look at what we're going to build here. It's a simple horizontal menu with 4 buttons 2 of which reveal submenus onmouseover. To get started download the files and extract the contents to a folder in your FrontPage website. You'll find a blank page (index.html) with some CSS applied, 4 button images and a page background image. Open index.html and we're ready to start.

Adding the Menu Buttons

  1. On the menu choose Insert - Layer FP will add a layer with the id Layer1 to the page.
  2. In the Layers window (Format - Layers if it isn't visible) click Positioning and choose these settings.

    notice that FP adds a height setting to each layer - this setting should be deleted
  3. Click inside the layer add hit Insert - Table choose these settings

  4. Click inside the 1st cell choose Insert - Picture browse to out1.gif and hit OK
  5. Tab to the next cell choose Insert - Picture again and browse to out2.gif tab to the next cell and insert out3.gif and finally add out4.gif to the last cell
  6. Click on out1.gif (the picture in the 1st cell) hit Ctrl - K to add a hyperlink type "javascript:;" (without the quotes) into the hyperlink box. Repeat for out2.gif out3.gif and out4. gif. Adding javascript:; as a link will allow us to add behaviors to these images later.

Adding the Sub Menus

We'll add sub menus to each of the 2 menu buttons - each sub menu will be a layer.

  1. Choose Insert - Layer on the menu FP will add a layer with the ID Layer2. Set it's properties (Format - Layers - Positioning) like this
    width: 127px;
    z-index: 101;
    left: 191px;
    top: 96px;
    height: deleted
     
  2. Add a table to the layer with 4 or 5 rows and put a hyperlink in each cell, if you like you can also add some text to the last cell.
  3. Repeat the above steps to add another layer to the page - set its properties as above just changing the left position to 311px

Add The Closer Layer

We need to add 1 last layer to the page to close the sub menus.

  1. Choose Insert - Layer and add a layer with these properties
  2. Notice the layer has been given the id of layer4 - we need to change this to closer. In the layers window (Format - Layers) double click on layer4 and type "closer" without the quotes.
  3. Click inside this layer choose Insert - Picture and browse to shim.gif. Right click shim.gif choose Picture Properties and set it's width to 608 and height to 300 - ensure Keep Aspect Ratio is not checked.
  4. Hit Ctrl K to add a hyperlink to shim.gif and type "javascript:;" (without quotes) into the hyperlink box

Adding the Behaviors

To make the menu work we need to add a behavior to each menu button.

Click on out1.gif hit Format - Behaviors to open the behaviors window and choose Insert - Menu Tools - Close Menu and hit OK. FP will add the behavior as onclick we need to change this to onmouseover - in the behaviors window click onclick at the bottom of the list that appears choose events for a and then onmouseover.

Click on out2.gif hit Format - Behaviors to open the behaviors window and choose Insert - Menu Tools - Open Menu choose layer2 in the list and hit OK. As we did above change the event to onmouseover.

Click on out3.gif hit Format - Behaviors to open the behaviors window and choose Insert - Menu Tools - Open Menu and hit OK. As we did above change the event to onmouseover.

Click on out4.gif hit Format - Behaviors to open the behaviors window and choose Insert - Menu Tools - Close Menu and hit OK. As we did above change the event to onmouseover.

Finally we can add a behaviors to the closer layer - click on shim.gif inside the closer layer choose Format - Behaviors - Insert - Menu Tools - Close Menu and hit OK. As we did above change the event to onmouseover.

Hiding the Layers

As a final step we need to make all the layers except layer1 invisible - choose Format - Layers and click to the left of layer2 and layer3 until you see a little closed eye - this will hide the layers. Your layers window should look like this.

Finished

That's it - save the page and preview it in your browser.  You may want to add FP swap image behaviors to the menu buttons as I did in the example. The technique is exactly the same for the other 2 example menus - just experiment to find an effect you like.

Examples

Here are examples of 3 different types of menu you can build.

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