Dreamweaver MX Tutorials >> Menus & Buttons >> Jump Menus

Jump Menus

Jump Menus or Drop Down Menus are an efficient way to incorporate navigation into your web pages. The are essentially a list of options that become visible when clicked. They can link to URL's, e-mail addresses, or anything a regular link can.

Step 1: Create 4 HTML files

1. Create 4 HTML files and name them. page1.htm, page2.htm, page3.htm and page4.htm.
2. You can create full pages or simply type a word on each page to distinguish it from the others.

Step 2: Page 1

1. Open page1.html
2. Click in the bottom cell of the page

Step 3: Centering the insertion point in the bottom cell

1. In the Properties Inspector, select Center on the Horizontal alignment.
2. This will center our Jump Menu on our screen.

Step 4: Inserting the Jump Menu

1. Click Insert>Form Objects>Jump Menu. You could also select the Forms Category under the Objects Inspector and select the Jump Menu button.
2. This will bring up the Insert Forms Dialog Window.

view

Step 5: Creating the Jump Links

Enter the navigation information:

1. In the text field, type Navigation. This will be the default text on the jump menu.
2. Leave the Go To URL Field blank.

view

Step 6: Adding the First Page

1. Click the plus sign (+) to add another link. This time, type "Page 1" in the Text field.
2. Using the "Browse" button and navigate to the "page1.htm" page you created.

Step 7: Adding Page 2

1. Click the plus sign (+) to add the next link.
2. Type "Page 2" in the text field and in the "Go To URL" field, use the browse button to navigate to "page2.htm".

view

Step 8: Adding Pages 3 and 4

Repeat Step 7 for "page3.htm" and "page4.htm".

Step 9: Finishing

Once you've completed adding the links, click OK to close the Insert Jump Menu Window. Test your pages by clicking F12.

Step 10: Edit the Jump Menu

You can also edit your jump menus 1 of 2 ways after you've created them.

• Click once on the Jump Menu and in the Properties Inspector click List Values

OR

• Double-click the Behavior in the Behaviors Panel to open the Jump Menu window.

Step 11: Change the text on the fields

1. Click once on the Jump Menu to select it.
2. On the Properties Inspector, click List Values...
3. Modify the names by selecting the fields and typing in them.
4. You can also edit the Value by clicking once on it. You could change the URL here if you needed to. We'll leave ours alone in this example.

view

Step 12: Repeat for the other pages

1. Repeat the same steps for the rest of the pages.
2. This is a good time for using Library Items, but for this example we're just working with Jump Menus and the added practice of creating them for 4 pages won't hurt:) If we created the menu as a Library Item, we could drag it from the Library and place it on each new page. This would save us the steps of having to create the links for each page.

Step 13: Test the pages

Go ahead and test your pages by Previewing In Browser (F12)

OPTIONAL

You can edit your Jump Menu in several ways. Let's say you wanted to change the Jump Menu on each page (page2.htm, page3.htm, page4.htm) so that the text displayed in the menu reflected the current page rather than having it say "Navigation"?

Easy, open the desired page, say "page2.htm" and click the Jump Menu once to select it. While selected, go up to the Properties Inspector and in the "Initially Selected" option, click "Page Two". Easy:) Preview in Browser and you'll see that when you're on page2.htm, the value is now set to Page Two. You can make the changes to the remaining pages if you like.

One more thing. If you decided to change the Initially Selected value on the remaining pages, you might realize you no longer have a need for the option, "Navigation".

To remove this, select the Jump Menu and in the Properties Inspector, click "List Values..."

Highlight "Navigation" and click the minus button to remove it. Click OK. "Navigation" will be removed from the options. You might need to re-select the "Initially Selected" for the Jump Menu.