Creating FrontPage Generated Fly-Out Menus

Flash Video on Fly-Out menus

• Fly-Out Menu Tutorial Requirements
• FrontPage 2003
• >Tools >Page Options >Authoring
  >Schema Version - Internet Explorer 5.0
  
  

To create a Fly-Out Menu, open your FrontPage website, create a new page and follow the steps below:
Note: Save your page often.

1. On the >Insert Menu choose >Layer
   
   
    
2. Now put your mouse inside the Layer and select >Insert >Interactive Button.
   Don't change any of the defaults except the "Text" and button type, I opted Embossed Capsule 1 for this Fly-Out Tutorial.
   
   
   
   
   
   This is what your page should look like now:
   
   
    
3. Select the Layer tag;Then from the bottom of the Layer drag the the Layer bottom up so it sized the same as the button.
   
   
   Your Layer should now look like this depending on whether or not you have it selected or not:

Selected	Not Selected
Note: you see a format mark and a anchor tag because I have these features turned on in FrontPage.

4. Now Select the Layer, not the button. You do this by clicking on the Layer Tag , and copy it and paste it.
   
   
   You now have a second layer positioned directly over the first.
    
5. On the Second Layer double click the Button not the layer and edit as follows:
   >Change the Text and link this to a page.
   >Click on the image tab and select >make the image a GIF image and use a transparent background.
   >Click OK.
   
   
    
6. Now you want to position the second Layer to the right and down a few pixels so that when you mouse over the first button the second will appear to the right and slightly down.
   Note: I prefer to use the arrow keys to move objects, you can drag items but this leaves room errors.
   
   
    
7. Make sure your Layer Task panel is open:
   >Format >Layer
   Now select layer 2 and click on the empty space below the eye until it changes to hidden:
   
   
   
   Click on preview, layer 2 should not be visible.
    
8. Now select Layer 1 [not the button] then click on Behaviors.
   [>Format >Behaviors or use the dropdown on the Layer Panel; Other Task Panes].
   Note: If this grayed out click here.
    
9. From the Insert button choose >Change Property.
   
   
    
10. The next screen may take a few seconds to popup.
    Change the radio button to >Select Element > Element ID > Dropdown - Layer 2
    Then click on the Visibility Button and Change to Visible.
    
    
     
11. Now Click Preview and click on the button, the second one should appear.
    Note: If you want the second button to appear on top of the first bring it forward on the Positioning Toolbar: >View >Toolbars >Position
    
    
    What you should see on click:
    
    
     
12. Now we are going to change Behavior from on click to onmouseover [on mouse over].
    On the Behaviors Pane, with layer 1 selected, hover over the "onclick" event and change to onmouseover. Save your page and test. The second button should appear when you mouseover it [hover with your mouse].
     
13. To create a full menu of buttons, copy and paste updating the text and links, you can set layer 2 to visible if you wish, then change it back.
    
    See our finished Fly-Out menu on the top right of this page.
     
14. For more information on this see our
    Flash Video on Fly-Out menus
    
    and consult Microsoft's FrontPage help menu.
     
15. The possibilities of the techniques used here are a lot... here's another sample, go ahead and open the page in FrontPage to see what makes it work.
    
    Enjoy!!

• Sample Menu Create Entirely in FrontPage 2003:

FrontPage Fly-Out Menu addition help.

1. How to insert a Layer in FrontPage 2003
   >Insert >Layer
   
   
    
2. How to expand the FrontPage Menu if your the item your looking for is not visible: Use the Expand Arrow at the bottom of the dropdown menu.
   
   
    
3. Show Anchor Tags in Design View in FrontPage:
   >Tools >Page Options >General >Checkbox - Show anchor points for layer.
    
4. Arrow Keys:
   
   
    
5. The possibilities of the techniques used here are a lot... here's another sample, go ahead and open the page in FrontPage to see what makes it work.
   
   Enjoy!!

Home

© Copyright 2004 Frontpagewiz.com. All Rights Reserved.