How to Create a Drop-Down Menu in Dreamweaver

What to Know

Go to Insert > Form > Form. Click the dotted red line on the form and go to Insert > Form > List/Menu. Choose accessibility options.
Click the menu and select its properties, then select List values to add new menu items. Click the plus sign to add more items.
Add item values and choose a default item. To add actions, go Insert > Form > Jump Menu. Add items to the Jump menu and save.

Dreamweaver makes it easy to create drop-down menus for your website. But like all HTML forms, they can be a bit tricky. This tutorial will walk you through the steps to creating a drop-down menu in Dreamweaver.

Dreamweaver Jump Menus

Dreamweaver 8 also provides a wizard to create a jump menu for navigation in your Web site. Unlike basic drop-down menus, this menu will do something when you are finished. You won't have to write any JavaScript or CGIs to get your drop-down form to work. This tutorial also explains how to use the Dreamweaver 8 wizard to create a jump menu.

of 20

First, Create the Form

Except for special wizards like the jump menu, Dreamweaver doesn't help you make HTML forms "work." For this, you need a CGI or JavaScript.

When you're adding a drop-down menu to your Web site, the first thing you need is a form to surround it. In Dreamweaver, go to the Insert menu and click Form, then choose "Form."

of 20

Form Displays in Design View

Dreamweaver shows your form location visually in the design view, so you know where to put your form elements because drop-down menu tags are not valid (and won't work) outside of the form element. As you can see in the image, the form is the red dotted line in the design view.

of 20

Choose List/Menu

Drop-down menus are called "list" or "menu" items in Dreamweaver. So to add one to your form, you need to go into the Form menu on the Insert menu and choose "List/Menu." Make sure that your cursor was within the red dotted line of your form box.

of 20

Special Options Window

Options window for the input tag accessibility attributes

In the Dreamweaver Options, there is a screen on Accessibility. Your drop-down menus will immediately be more accessible than other websites if you fill out these five options.

of 20

Form Accessibility

The accessibility options are:

Label

The label field shows up as text beside your form element. Type in a name for your drop-down menu. It can be a question or short phrase that the drop-down menu will answer.

Style

HTML includes a label tag to identify your form labels to the web browser. Your choices are to wrap the drop-down menu and the label text with the tag, to use the "for" attribute on the label tag to identify which form tag it references, or not to use the label tag at all.

Position

You can place your label before or after the drop-down menu.

Access Key

Visitors can use an access key with the Alt or Option keys to get directly to that form field. This keyboard shortcut makes your forms very easy to use without a mouse.

Tab Index

The tab index is how users should access the form fields when using the keyboard to tab through the web page.

When you've updated your accessibility options, click OK.

of 20

Select the Menu

Selecting the Menu in the Dreamweaver WYSIWYG view

Once you have your drop-down menu displaying in Dreamweaver design view, you need to add the various elements. First, select the drop-down menu by clicking on it. Dreamweaver will put another dotted line around just the drop-down menu to show that you've chosen it.

of 20

Menu Properties

The properties menu will change to the list/menu properties for that drop-down menu. There you can give your menu an ID (where it says "select"), decide if you want it to be a list or a menu, give it a style class from your style sheet, and assign values to the drop-down.

What's the Difference Between List and Menu?

Dreamweaver calls a menu drop-down menu any drop-down that only allows one selection. A "list" allows multiple choices in the drop-down and can be more than one item high.

If you want a drop-down menu to be multiple lines high, change it to a "list" type and leave the "selections" box unchecked.

of 20

Add New List Items

Adding new values to the menu in Dreamweaver

To add new items to your menu, click on the "List values..." button, which opens the above window. Then, type your item label in the first box. It will display on the page.

of 20

Add More and Reorder

Click on the plus icon to add more items. If you want to re-order them in the list box, use the up and down arrows on the right.

of 20

Give All Items Values

If you leave the value blank, the label will go to the form. But you can give all your items values — to send alternate information to your form. You will use this a lot for things like jump menus and hyperlinking.

of 20

Choose a Default

Web pages default to displaying whichever drop-down item is listed first as the default item. But if you want a different one selected, highlight it in the "Initially selected" box on the Properties menu.

of 20

See Your List in Design View

Viewing the drop-down menu in the design pane

Once you're done editing the properties, Dreamweaver will show your drop-down list with the default value selected.

of 20

See Your List in Code View

If you switch to code view, you can see that Dreamweaver adds your drop-down menu with clean code. The only extra attributes are the accessibility options. The code is all indented and very easy to read and understand.

of 20

Save and View in Browser

Saving the menu and previewing it in a browser

If you save the document and view it in a web browser, you can see that your drop-down menu looks just like you would expect it to.

of 20

But It Doesn't Do Anything...

The menu we created above looks fine, but it doesn't do anything. To get it to do something, you need to set up a form action on the form itself.

Luckily, Dreamweaver has a built-in drop-down menu form that you can use immediately on your site without needing to learn about forms, CGIs, or scripting. It's called a Jump Menu.

The Dreamweaver Jump Menu sets up a drop-down menu with names and URLs. Then you can choose an item in the menu, and the Web page will move to that location, just like if you had clicked a link.

Go to the Insert menu and choose Form and then Jump Menu.

of 20

Jump Menu Window

Unlike the standard drop-down menu, the Jump menu opens a new window for you to name your menu items and add details about how the form should work.

For the first item, change the text "untitled1" to what you want it to read and add a URL.

of 20

Add Items to Your Jump Menu

Click on the add item to add a new item to your jump menu. Add as many items as you wish.

of 20

Jump Menu Options

Final configuration options for the jump menu

Once you've added all the links you want, you should choose your options:

Open URLs In

If you have a frameset, you can open the links in a different frame. Or you can change the option of Main Window to a special target so that the URL will open in a new window or elsewhere.

Menu Name

Give your menu a unique ID for the page. It's required so that the script will work correctly. It also allows you to have multiple jump menus in one form - give them all different names.

Insert Go Button After Menu

I like to select this because sometimes the script doesn't work when the menu changes. It's also more accessible.

Select First Item After URL Change

Select this if you have a prompt such as "Select one" as the first menu item. This will ensure that that item stays default on the page.

of 20

Jump Menu Design View

Just like with your first menu, Dreamweaver sets up your jump menu in design view with the default item visible. You can then edit the drop-down menu like you would any other.

If you edit it, make sure not to change any IDs on the items; otherwise, the script may not work.

of 20

Jump Menu in Browser

Saving the file and pressing F12 will display the page in your preferred browser. There you can select an option, click "Go," and the jump menu works.

Was this page helpful?

Thanks for letting us know!

Tell us why!