Front and Center: Building Nested Menu Systems

The dynamic page you created in this chapter demonstrated the power behind layers in FrontPage when combined with other features. However, the menu system you built is not as powerful as it could be. Most menu systems are nested instead of being single layer. The Layers task pane and Behaviors feature of FrontPage will allow you to create a nested menu feature with little additional effort.

  1. Create a new layer and change the ID to Nested.

  2. Add two Interactive Buttons to the new layer. Use Nested 1 for the text on one button and Nested 2 for the text on the other.

  3. Resize the layer so that it is the same size as the two Interactive Buttons.

  4. Position the new layer next to the Software button, as shown in Figure 25.10.

    Figure 25.10. Adding a nested submenu is easy with Layers and Behaviors.

    graphics/25fig10.jpg

Now you need to add some new Behaviors to control the nested submenu. First, add a new Behavior to the Software button that displays the Nested layer in the onmouseover event.

  1. Display the ProdSubmenu layer and select the Software button.

  2. Switch to the Behaviors task pane and select Insert, Change Property.

  3. Select the Select Element option.

  4. Select div in the Element Type dropdown.

  5. Select Nested in the Element ID dropdown.

  6. Click the Visibility button.

  7. Select the Visible option and click OK.

  8. Change the event from onclick to onmouseover.

The new nested submenu will now appear when you hover over the Software button. If you'll remember how the other submenus were configured, you know already that we need a few more Behaviors for this to work right. We need

  • A Behavior on each of the buttons in the Nested layer that changes the Visibility property of the Nested layer to Visible when you hover over them.

  • A Behavior on the Nested layer that hides the Nested layer when the mouse moves off it.

  • A Behavior on the Nested layer that hides the ProdSubmenu layer when the mouse moves off the Nested layer.

  • A Behavior on the ProdSubmenu layer that hides the Nested layer when the mouse moves off the ProdSubmenu layer.

  • A Behavior on each of the buttons in the Nested layer that changes the Visibility property of the ProdSubMenu layer to Visible when you hover over them.

To add these Behaviors, follow these steps:

  1. Switch to the Layers task pane and display the ProdSubmenu layer and the Nested layer.

  2. Switch to the Behaviors task pane.

  3. Select the first button in the Nested layer.

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

  5. Select the Select Element option.

  6. Select div in the Element Type dropdown.

  7. Select Nested in the Element ID dropdown.

  8. Click the Visibility button.

  9. Select the Visible option and click OK.

  10. Click OK.

  11. Change the event from onclick to onmouseover.

  12. Complete steps 4 11 for the second button in the Nested layer.

  13. Select the Nested layer.

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

  15. Select the Current Element option.

  16. Click the Visibility button.

  17. Select the Hidden option and click OK.

  18. Click OK.

  19. Change the event from onclick to onmouseout.

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

  21. Select the Select Element option.

  22. Select div from the Element Type dropdown.

  23. Select ProdSubmenu from the Element ID dropdown.

  24. Click the Visibility button.

  25. Select the Hidden option and click OK.

  26. Click OK.

  27. Change the onclick event to onmouseout.

  28. Select the ProdSubmenu layer.

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

  30. Select the Select Element option.

  31. Select div from the Element Type dropdown.

  32. Select Nested from the Element ID dropdown.

  33. Click the Visibility button.

  34. Select the Hidden option and click OK.

  35. Click OK.

  36. Change the onclick event to onmouseout.

Add a Behavior to each Interactive Button in the Nested layer. Connect the Behavior to the onmouseover event, and set the visibility of the Products layer to Visible in that event. As a final step, add another Behavior for each button in the Nested layer for the onmouseover event. In the event, change the visibility property of the ProdSubMenu layer to Visible.

Now switch back to the Layers task pane and make the ProdSubmenu and the Nested layer invisible. Save the page and browse to it to see your completed nested dynamic menu in action.

Using the lessons you've learned in this chapter, you can easily create a very complex menu system and Web page using Layers and Behaviors without knowing anything about writing client-side script. Even if you know how to write script to accomplish these tasks, you might find yourself preferring the Layers task pane and the Behaviors task pane because of the sheer amount of time that they will save you.



Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net