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
- Create
4 HTML files and name them. page1.htm, page2.htm, page3.htm and
page4.htm.
- You
can create full pages or simply type a word on each page to distinguish
it from the others.
Step 2: Page 1
- Open page1.html
- Click in the bottom
cell of the page
Step 3: Centering
the insertion point in the bottom cell
- In the
Properties Inspector, select Center on the Horizontal alignment.
- This
will center our Jump Menu on our screen.
Step 4: Inserting the Jump Menu
- Click
Insert>Form
Objects>Jump Menu. You could also select the Forms
Category under the Objects
Inspector and select the
Jump Menu button.
- This
will bring up the Insert
Forms Dialog Window.
Step 5: Creating the Jump Links
Enter the navigation information:
- In the
text field, type Navigation. This will be the default text on
the jump menu.
- Leave
the Go To URL
Field blank.
Click
here to view window.
Step 6: Adding the First Page
- Click
the plus sign (+) to add another link. This time, type "Page
1" in the Text field.
- Using
the "Browse" button and navigate to the "page1.htm"
page you created.
Click
here to view window.
Step 7: Adding Page 2
- Click
the plus sign (+) to add the next link.
- 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.
OR
Step 11: Change the text on the fields
- Click
once on the Jump Menu
to select it.
- On the
Properties
Inspector, click List Values...
- Modify
the names by selecting the fields and typing in them.
- 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
- Repeat
the same steps for the rest of the pages.
- 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.
|