Microsoft Office FrontPage 2003      
Developer's Toolkit
Resources | Links | Search
  extend design code  
             
  New Features
 
Microsoft® Windows® SharePoint Services
 
Microsoft® Office SharePoint Portal Server
 
Microsoft Office System
 
.NET Framework
 
 
Real world scenarios that fully expose great new functionality in FrontPage 2003 and Windows SharePoint Services.
 
 
  financial planning finance  
  sales & marketing sales & marketing  
  human resources human resources  
   
  FrontPage Developer's Toolkit > Resources > Tips and Tricks > Extending
 

How to Create a Fly-out Menu in a FrontPage-based Web Site

Using Layers and Interactive Buttons in FrontPage 2003, you can create fly-out menus to enhance your Web site's navigation. This can all be done without any direct coding by using FrontPage.

To create a fly-out menu in your FrontPage-based Web site, open a Web page in FrontPage 2003 and do the following:
  1. From the Insert menu select Layer and then repeat this step to create 2 Layers.
  2. Grab Layer2 and drag it to the left of Layer1.


     
  3. Select Layer1 and from the Insert menu click Interactive Button.
  4. From the Button tab, choose Border Bottom 1 under Buttons:, type FlyOut in the Text: textbox, and select OK.


     
  5. Next, resize Layer1 to be the same size as the Interactive Button and select Layer2.
  6. From the Insert menu, cilck on Interactive Button, choose Soft Capsule 7, type Support in the Text: textbox and then type in http://support.microsoft.com in the Link textbox and select OK.
  7. Resize Layer2 to be the same size as the Interactive Button.
  8. To display the Layers task pane, Right-click on Layer2 and choose Layer Properties from the fly-out menu.
  9. With Layer2 selected in the task pane, click on the left hand column of Layer2 until you get a closed eye. This will indicate that the layer’s visibility is set to hidden.


     
  10. Select Layer1 on the page and at the bottom of the Layers task pane click on Behaviors.

    Note: Layer2 is invisible.
     
  11. Click on Insert and choose Change Property. (The “Scripts On Tag” label should read <div>).
  12. Now click on Select Element in the Change Property dialog and choose Layer2 in the Element ID dropdown.
  13. Select the Visibility button, click Visible, and select OK and then OK again.

    Note: You have an onclick event now in the Behaviors task pane.
     
  14. Click on the onclick event, change it to onmouseover, and Save the Page. This will also save the images for the Interactive buttons.
  15. To view your fly-out menu, open the page in your browser and use the mouse to hover over the visible Interactive button.
More information
For more information about layers, see Microsoft FrontPage 2003 Help.