Setting Layer Properties with Behaviors

Now you're ready to add interactivity to your menu. When the page first loads, the only layer that you want to be visible is the mainMenu layer. When a user hovers over the Products button, the ProdSubmenu layer will display. When a user hovers over the Support button, the SupportSubmenu layer will appear.

In addition to configuring these layers to appear at the correct time, you will also need to configure when each layer should disappear. You wouldn't want your menus to appear and stay visible forever. When the user has moved the mouse out of the menu, you want the menu to disappear.

The perfect way to implement all of this is using Behaviors. By using the Change Property and Change Property Restore Behaviors, you can easily configure your layers to appear and disappear just when you need them to.

For more information on using Behaviors, see "Using Behaviors," p. 449.

Setting the Visibility of Layers

When the page loads, the only layer that you want people to see is the mainMenu layer. All the other layers should be invisible. The Layers task pane provides for an easy method of controlling the visibility of layers using the Layer Visibility column.

The Layer Visibility column is empty by default, but by clicking next to a specific layer, an eyeball icon will appear, as shown in Figure 25.8. The open eye icon means that the layer is visible. There are three visibility states for each layer in the Layers task pane:

• Default Indicated by the absence of an eye icon.

• Visible Indicated by an open eye icon.

• Invisible Indicated by a closed eye icon.

Figure 25.8. The Layer Visibility column provides for full control over layer visibility.

Click the eye icon on the ProdSubmenu layer so that it appears closed. The Products submenu will now appear hidden when the page is first browsed. Click the Layer Visibility column next to the SupportSubmenu menu twice so that the SupportSubmenu layer is invisible as well. Now save your page and browse it. You will see that the only layer that is visible is the mainMenu layer, as seen in Figure 25.9.

Figure 25.9. The main menu appears, but all other layers are hidden.

TIP

Even if a layer is set to be hidden, it is visible if it is selected in the Layers task pane.

Adding Layer Interactivity

Now you need to add some interactivity. Remember that the ProdSubmenu layer needs to be made visible when a user hovers over the Products button. To add that interactivity, you will use the Change Property Behavior to change the Visibility property for the ProdSubmenu layer.

For more information on the Change Property Behavior, see "The Change Property Behavior," on p. 454, and Change Property Restore Behavior," p. 457.

Configuring the Products Submenu

Click the Other Task Panes dropdown in the Layers task pane and select Behavior or select Format, Behaviors to display the Behaviors task pane. To add the interactivity for the Products submenu, follow these steps:

1. Select the Products button.

2. In the Behaviors task pane, click the Insert button.

   NOTE

   Behaviors will already be listed for each of your Interactive Buttons. These are the Behaviors that FrontPage added automatically to make your Interactive Buttons work.

3. Select Change Property from the Behaviors menu.

4. Select the Select Element radio button.

5. Select div from the Element Type dropdown.

6. Select ProdSubmenu from the Element ID dropdown.

7. Click the Visibility button.

8. Select the Visible radio button and click OK.

9. Make sure that the Restore on Mouseout Event check box is unchecked.

10. Click OK to add the Behavior.

11. Locate the Behavior in the Behaviors task pane and change the Events from onclick to onmouseover. The Behavior will change position in the Behaviors task pane when the event is changed.

Now if you browse the page, the ProdSubmenu layer will appear when you hover over the Products menu. However, there is a problem. The Products submenu will never disappear unless you reload the page. You want the Products submenu to disappear if the user moves the mouse off the menu.

If the submenu does not appear when you hover over the Products button, see "Behaviors Don't Work" in the "Troubleshooting" section of this chapter.

Switch to the Layers task pane and select the ProdSubmenu layer to make it visible so that you can apply the Behaviors to it. Without deselecting the ProdSubmenu layer, switch to the Behaviors task pane.

To configure the ProdSubmenu layer so that it disappears at the correct time, follow these steps.

1. Select Insert, Change Property to display the Change Property dialog.

2. Leave the Current Element option selected.

3. Click the Visibility button and select the Hidden option.

4. Click OK.

5. Make sure that the Restore on Mouseout Event box is unchecked.

6. Click OK.

7. In the Behaviors task pane, change the Events column from onclick to onmouseout.

Now the Products button is configured to show the submenu when you hover over it, and the ProductSubmenu layer is configured to hide itself when you move the mouse outside the menu.

Save and test your page to see how it's working out so far. Hover over the Products button, and you'll notice that the ProductSubmenu layer appears. Move the mouse over the ProductSubmenu layer, and you'll notice a problem. When you hover over the buttons on the ProductSubmenu layer, the entire menu disappears! This is obviously not what you expect to happen. To correct this, you need to add a Behavior to each button on the ProductSubmenu layer.

Switch back to FrontPage, activate the Layers task pane, and select the ProdSubmenu layer to make it visible again. Switch to the Behaviors task pane and configure the Behaviors for each button as follows:

1. Select the Software Interactive Button.

2. In the Behaviors task pane, select Insert, Change Property.

   NOTE

   Several Behaviors will already be listed for the Software button. These are the Behaviors that FrontPage added automatically to implement the functionality of your Interactive Button.

3. Select the Select Element option.

4. Select div in the Element Type dropdown.

5. Select ProdSubmenu from the Element ID dropdown.

6. Click the Visibility button.

7. Select the Visible option.

8. Click OK.

9. Make sure that the Restore on Mouseout Event check box is unchecked.

10. Click OK.

11. Change the onclick event to onmouseover.

Perform the same steps for the Hardware Interactive Button. After configuring the Hardware button, save and preview your page in the browser. Hover over the Products button to display the Products submenu, and then hover over the Software and the Hardware buttons. Move the mouse below the Products submenu and notice that the menu disappears as expected.

One problem still remains. If you hover over the Products button and then move the mouse off the Products button to any other button or off the menu itself without hovering over the submenu, the ProdSubmenu layer will remain visible. You actually want the ProdSubmenu layer to disappear if a user hovers over one of the other mainMenu layer buttons, or if the user moves the mouse off the menu altogether. To correct that, follow these steps:

1. Switch back to FrontPage.

2. Select the Home button.

3. Switch to the Behaviors task pane.

4. Select Insert, Change Property.

5. Select the Select Element option.

6. Select div from the Element Type dropdown.

7. Select ProdSubmenu from the Element ID dropdown.

8. Click the Visibility button.

9. Select the Hidden option.

10. Click OK.

11. Make sure that the Restore on Mouseout Event check box is unchecked.

12. Click OK.

13. Change the onclick event to onmouseover.

Make the same Behavior configuration change for the Support button. After you've done that, create a new Behavior for the mainMenu layer that will hide the ProdSubmenu layer as follows:

1. Select the mainMenu layer.

2. From the Behaviors task pane, select Insert, Change Property.

3. Select the Select Element option.

4. Select div from the Element Type dropdown.

5. Select ProdSubMenu from the Element ID dropdown.

6. Click the Visibility button.

7. Select the Hidden option.

8. Click OK.

9. Make sure that the Restore on Mouseout Event check box is unchecked.

10. Click OK.

11. Change the event from onclick to onmouseout.

Save your page and browse it to preview the menu. The Products submenu should now work perfectly and should display and hide itself in response to the correct events.

Configuring the Support Submenu

The next step is to configure the Support submenu. The steps are the same as the steps you completed for the Products submenu.

1. Create a Behavior for the Support button to display the SupportSubmenu layer in the onmouseover event.

2. Create a Behavior for the FAQ and Ask Us buttons to display the SupportSubmenu layer in the onmouseover event.

3. Create a Behavior for the SupportSubmenu layer that hides the SupportSubmenu layer in the onmouseout event.

4. Create a Behavior for the Products and Contact Us buttons that hides the SupportSubmenu layer in the onmouseover event.

5. Create a Behavior for the mainMenu layer that hides the SupportSubmenu layer in the onmouseout event.

Save the page again and preview it. Your dynamic menu should be fully functional at this point.