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.

You can preview the completed version of this lesson by clicking here

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.

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.

Click here to view window.

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.

Click here to view window.

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".

Click here to view window.

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.

Click here to view window.

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.

Home | Dreamweaver | Fireworks | Flash | Photoshop | Elements | PowerPoint| Ebay | QuickTime Pro | Flash 5 CD | Fireworks MX CD | QuickTime Support | Contact

Copyright © 1999-2011 CBT Cafe, All rights reserved

Flash®, Fireworks™, and Dreamweaver® are registered trademarks of Macromedia, Inc. in the United States and/or other countries
Photoshop®, Photoshop Elements® and Illustrator® are registered trademarks of Adobe Systems, Inc.
QuickTime® is a registered trademark of Apple Computer, Inc.
Ebay® is a registered trademark

CBT Cafe | Multimedia Learning | Interactive Graphics