• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 11. Creating Forms > Creating Jump Menus

Creating Jump Menus

A jump menu is a drop-down menu that contains links to other pages in your site or to other Web sites. Like regular links, the jump menu can link to any type of file, including graphics or PDF files. The jump menu provides an easy-to-use interface for linking to pages in your site, if you don't make the list too long. A jump menu is embedded in a form and looks like a menu list in the browser.

Open the related_navigation.html file from the Lesson_11_Forms folder. Place the insertion point at the end of the line of text “Learn more about navigation:”. Click the Jump Menu icon from the Forms category in the Insert bar.


Alternatively, you can also choose Insert > Form Object > Jump Menu.

The Jump Menu dialog box opens. By default, there is one item listed in the menu, unnamed1. Dreamweaver assigns generic names automatically in a numeric order: unnamed1, unnamed2, etc.

In the Text text field of the Jump Menu dialog box, type Pick One. Type # in the When Selected, Go To URL text field.

The first item in the menu list will appear in the first line of the menu. Since the user will see this initially in the menu list, the first line should be a short description of the list or a short instruction to let the user know that this is a jump menu.

In the Options area, choose Select First Item After URL Change.

This forces the menu list to display the first menu item in the list when the user returns to this page; otherwise, the list displays the most recent option chosen.


The Open URLs In drop-down menu can be used to target links to specific frames, as you did in Lesson 10. For this exercise, you should leave the default Main Window selected.

Click the plus sign (+) button to add a new menu item. Type Radar in the Text field, press Tab, and type radar.html in the When Selected, Go To URL text field. Repeat this step, entering Sonar, sonar.html; GPS, gps.html; and Buoys, buoys.html. Click OK when you are done.

When these items are selected in the browser window, they will link to their appropriate pages. A link will be activated when the user selects the corresponding item.


If you want to add a Go button to your list, select the Insert Go Button After Menu check box.

Dreamweaver will automatically insert the required form when you insert the jump menu, as you can see by the dotted red lines. Since the insertion point was at the end of the line of text, the jump menu is created just below the text. If you want the prompt text “Learn more about navigation” to appear on the same line as the jump menu, you need to move that text into the form. Using tables as you did with the lights_quiz.html file will give you more control over the layout of your forms.


Use the up and down arrow icons to adjust the order of the items in the menu.

When you click OK the inserted menu may appear to be very short. You'll preview the page in the browser to see how it will really look to a visitor.

Save the file and preview it in the browser.

After you create the jump menu, you can make changes by using the Property inspector or the Behaviors panel. The Property inspector gives you limited editing capability, allowing you to change the text the user sees and change the order in \which the text appears in the list. For more extensive editing control, select the jump menu in the document window and double-click the Jump Menu action listed on the Behaviors panel.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint