Home Books Search Contact
About

 

  Description 

Step-by-step instructions for creating simple DHTML (drop-down) menus in FrontPage 2003.

 

  Solution 
Despite the popularity of DHTML menus on Web pages, FrontPage 2003 has no specific features for creating them. However, it does provide two new featuresLayers and Behaviorsthat make it easy to create DHTML menus by hand.

To understand how this works, you should first understand that all DHTML menus consist of multiple elements.
To try out a DHTML menu such as this procedure creates, click here.

 

The main menu bar is an HTML table or some other structure that displays a series of hyperlinks. These hyperlinks:
Can be pictures or text.
May have rollover effects or not.
May or may not point to another Web page. For example, one or more of them may simply run JavaScript code that does nothing.
Each menu leaf is typically an HTML table with a hyperlink in each cell.
The main menu bar and each menu leaf typically reside within a Layer: that is, within a <div> that uses absolute positioning. This makes it relatively easy to:
Arrange each of these elements on the page.
Hide and reveal the menu leafs.

Behaviors make the menu leafs appear and disappear on cue. Whenever the mouse passes over a menu bar hyperlink:

One Behavior makes the correct menu leaf visible.
Additional Behaviors ensure that all other menu leafs are invisible.

 

Warning: DHTML menus you create in FrontPage 2003 have one major limitation: they rely on absolute positioning. This means the main menu bar and each menu leaf will occupy fixed positions  relative to the top left corner of the browser window, no matter how the rest of the Web page might adapt itself to the Web visitor's window size and other browser settings.

This particularly affects a main menu bar that uses text hyperlinks. If text appears larger or smaller than you expect on some visitor's browser, your menu leafs may appear misaligned.

Also:
If you want to use pictures as DHTML menu items, you'll need to create them in advance, using your favorite picture editor. A menu with five main options, each having four suboptions, requires 25 pictures. If you want rollover effects, you'll need to create and manage twice that many.
If you opt for text hyperlinks, specify sizes in pixels for all table cells, and provide enough slack to accommodate variations in the visitor's browser settings.
The FrontPage Behaviors feature adds HTML to the <head> section of any pages that uses it. Unfortunately, neither the Shared Border component nor the Include Page component propagate content from the <head> section.
As a result, you can't use Shared Border or Include Page components to replicate DHTML menus you create using this procedure.
Dynamic Web Templates do replicate the content of the <head> section, and might therefore be a better choice. You should be aware, however, that automatic replication of Dynamic Web Templates fails on server-based Web sites running the FrontPage Server Extensions 2002 and earlier. (This is because the server extensions don't maintain where-used lists for each Dynamic Web Template).

Here's how to create a simple DHTML menu in FrontPage 2003:

Create the Main Menu Bar
1. Open the Web page that you want to contain a DHTML menu.
2. Choose page Options from the Tools menu, and make sure the checkbox Use DIV Tags When Positioning is selected. When it is, click OK.
3. Make sure the Quick Tag Selector is visible. If it isn't choose Quick Tag Selector from the View menu.
4. Make sure the Positioning toolbar is visible. If it isn't, choose Toolbars from the View menu, and then click Positioning.
5. Set aside a space where the DHTML menu will appear.
Note: The DHTML menu will always appear in the same exact position, relative to the top left corner of the Web page.
Although other objects may reposition themselves when the visitor resizes the browser window, chooses a different text size, or otherwise changes the appearance of the page, the DHTML menu will not.
6. Press Ctrl+End to set the insertion point at the very end of the Web page. (Actually, anywhere outside a container will do. A container is a table, div, span, or other structure that contains and positions other content.)
7. To create a horizontal menu bar, insert an one-row HTML table with a column for each main menu option.
To create a vertical menu bar, insert a one-column HTML table with a row for each main menu option.
8. Within each cell of the table from step 7, enter the picture or verbiage for one main menu option.
9. Create a hyperlink for each main menu option you created in step 8.
If you want to display a new page when the visitor clicks a main menu option, hyperlink to that page in the usual way.
If you want the visitor to say on the current page, enter a JavaScript hyperlink that does nothing, such as:
javascript:;
10. Make sure the insertion point is inside the main menu table, then click the right-most <table> icon in the Quick Tag Selector. This will select the entire table.
11. Click the Position Absolutely button on the Positioning toolbar. This will draw an absolutely-positioned <div> (that is, a Layer) around the table.
12. Drag the new Layer (and its contents) into the space you set aside in step 5.
13. If the Z-Index box in the Positioning toolbar is blank or contains a value less than 2, change it to 2.
14. If the Right, Bottom, Width, or Height boxes in the Positioning toolbar contain anything, erase it. This completes the layout of the main menu bar.
   
Create a Menu Leaf
1. To begin creating the first menu leaf, press Ctrl-End.
2. Create a one-column HTML table with a row for each menu item you want the leaf to contain.
3. Within each cell of the table from step 2, enter the picture or verbiage for one option on the menu leaf.
4. For each menu option you just created, build a hyperlink that points to the page you want.
5. Make sure the insertion point is inside the menu leaf table, then click the right-most <table> icon in the Quick Tag Selector. This will select the entire table.
6. Click the Position Absolutely button on the Positioning toolbar. This will draw an absolutely-positioned <div> (that is, a Layer) around the table.
7. Drag the new Layer into position under the its main menu command.
8. If the Right, Bottom, Width, or Height boxes in the Positioning toolbar contain anything, erase it.
9. Make sure the Layers task pane is on display. For example choose Task Pane from the View menu, then choose Layers from the drop-down list at the top of the task pane.
10. The Layers task pane will display a line for the new Layer. Double-click the ID cell in that row to make the Layer name editable, and then give the Layer a reasonable name. Names 5-10 characters long with no spaces or special characters are best. When in doubt, name the Layer leaf1, leaf2, or whatever is next in sequence.
11. Click the Layer Visibility cell for the new Layer until its status is Visibility: Hidden. This is the column with an eye as the column heading. The icon for Visibility: Hidden is a closed eye.
12. Make sure the Z column contains a value of at least 2. If the value is 1 or less, double-click it and enter 2.
13. Repeat these steps for each remaining menu leaf. If you have four main menu commands, for example, you'll need four menu leafs.
   
Animate the Menus
1. Make sure the Behaviors task pane is on display. For example, choose Behaviors from the drop-down list at the top of the task pane.
2. Select the hyperlinked text or picture for a main menu command. Just below the Insert button, the Behaviors task pane should display Scripts On Tag: <a>.
3. Click the Insert button in the Behaviors task pane, and then choose Change Property from the shortcut menu. This will display a Change Property dialog box
4. Click the Select Element radio button.
5. Choose Element Type: div
6. Choose Element ID: leaf1 (or whatever you named the first menu leaf).
7. Click the Visibility button.
8. If the Element ID you selected in step 6 is the one that corresponds to the current main menu command, click Visible. Otherwise, click Hidden. Then, click OK.
9. Back on the Change Property dialog box, click the Add button. This will display an Insert Property dialog box
Note: You can skip steps 9-12 if you don't care about compatibility with Netscape Navigator 4.
10. Specify Property Name: visibility.
11. Specify Property Value as follows:
If the Element ID you selected in step 6 is the one that corresponds to the current main menu command, specify show.
Otherwise, specify hide.
12. Click OK to close the Insert Property dialog box.
13. Click OK to close the Change Property dialog box.
14. In the Behaviors task pane, the Events setting for the new Behavior will default to onclick. This is incorrect. To correct this, click on the word onclick, open the drop-down menu, and choose onmouseover.
15. Repeat steps 3-14 until you've defined Behaviors for each menu leaf.
Note: If your DHTML menu has five main commands, you'll need to specify five Behaviors for the first command, five Behaviors of the second command, and so forth. That's 25 Behaviors in all!
The first main menu command needs one Behavior to make menu leaf 1 visible, and one each to make menu leafs 2, 3, 4, and 5 invisible.
The second main menu command needs one Behavior to make menu leaf 2 visible, and one each to make menu leafs 1, 3, 4, 5 invisible.
And so forth.
Although, logically, no more than one menu leaf can ever be visible at a given time, it's much easier to make all the unwanted leafs invisible than it is to figure out which one to modify.
16. Repeat steps 1-15 until you've defined Behaviors for each main menu command.
 
Checking Your Work In Code View:
Here's the HTML that appears in Code view for the first of four commands in a DHTML menu:
<td><a href="javascript:;"
onmouseover="
FP_changeProp(/*id*/'leaf1',0,'style.visibility','visible','visibility','show');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide')"
>Earth</a></td>
leaf1 through leaf4 are the names of the four menu leafs. In the code for the second main menu command, the settings for leaf1 would be hidden and hide, and the setting for leaf2 would be visible and show, and so forth.
   
Reset All Menu Leafs
This group of steps is optional. It handles the situation where a visitor opens a menu, then moves the mouse to some other part of the Web page without clicking a hyperlink.

To get any open menu leafs to disappear, these steps display a transparent background picture between the menu and any ordinary Web content. Moving the mouse off a menu leaf will inevitably move it over the transparent background, and then a Behavior on the background can hide the menu leafs.

If you skip these steps, moving the mouse off a menu leaf won't make the leaf disappear (unless, or course, the mouse movement selects another menu command). But if once visitors open a menu, they'll almost always click one of the choices, this may not matter. The current page has only seconds to live before a new one replaces it.
1. Press Ctrl+End, then add a small, transparent GIF picture to the end of the Web page.
2. Resize the picture so it's fairly large. For example, select it and then drag its lower right corner.
3. Hyperlink the picture to the following URL:
javascript:;
4. With the picture still selected, click the Position Absolutely button on the Positioning toolbar.
5. Make sure the Z-Index box on the Positioning toolbar contains a value of 1.
6. If the Right, Bottom, Width, or Height boxes in the Positioning toolbar contain anything, erase it.
7. Display the Layers task pane and give the new Layer a name, such as menubg.
8. Drag the picture under your main menu bar.
Note: The picture will be under the menu bar (and your menu leafs) because it has a Z-Index of 1. If you followed all the earlier instructions, your menu bar and menu leafs will have a Z-Index of at least 2.
9. If necessary, enlarge the picture again so it provides a complete background to the menu bar and all leafs, plus a small margin.
10. Use the Quick Tag Selector to select the transparent background's hyperlink, then use the Behaviors task pane to add:
One Behavior for each Layer that contains a menu leaf.
One Behavior for the Layer that contains the transparent background.
In each case, the Behavior should make the object invisible. That is, it should set style.visibility to hidden (for IE and Netscape 6/7) and visibility to hide (for Netscape 4).
11. Use the Layers task pane to make the transparent background Layer invisible when the page loads.
12. For each main menu command, add a Behavior to its hyperlink, making the transparent background Layer visible.
Note: A reasonable person might question the need for Behaviors that make a transparent picture visible and invisible. Here's the reason:
When a menu leaf is visible, the transparent background needs to be surround it and be visible (i.e. active). That way, when the mouse moves off the menu leaf and onto the background, a Behavior on the background can hide the menu leaf.
If the transparent background were visible when no menu leaf is visible, the mouse pointer would be a hand over the entire transparent background (which, you recall, is a hyperlink) and ordinary hyperlinks behind the transparent background wouldn't be assessable.

 

Thanks to the following people for contributing to this article.
Bill Somogyi
Jon Spivey
Ron Symonds
  Comment 
Comment on this article.

 

 

  Books 
Microsoft Office
FrontPage 2003
Inside Out
The most complete reference to every feature of FrontPage 2003.
Order Info
Microsoft Windows
SharePoint Services
Inside Out
The most complete reference to Microsoft's key collaboration platform.
Order Info
Microsoft FrontPage
Version 2002
Inside Out
The most complete reference to FrontPage 2002
Order Info
More Books by Jim Buyens

 

 

 

Copyright © 2004 Jim Buyens
Last updated February 22, 2005