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 LayersWhen 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:
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 InteractivityNow 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 SubmenuClick 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:
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.
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.
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:
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:
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:
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 SubmenuThe next step is to configure the Support submenu. The steps are the same as the steps you completed for the Products submenu.
Save the page again and preview it. Your dynamic menu should be fully functional at this point. |