How to Create a Drop-Down Menu in Dreamweaver

01
of 20

First Create the Form

First Create the Form
How to Create a Drop-Down Menu in Dreamweaver First Create the Form. Screen shot by J Kyrnin

List Menus, Drop-Downs, and Jump Menus in Dreamweaver

Dreamweaver makes it easy to create drop-down menus for your Web site. 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 actually 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.

Important Note About HTML Forms and Dreamweaver

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. Please see my tutorial Making HTML Forms Work for more information.

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

02
of 20

Form Displays in Design View

Form Displays in Design View
How to Create a Drop-Down Menu in Dreamweaver Form Displays in Design View. Screen shot by J Kyrnin

Dreamweaver shows your form location visually in the design view, so you know where to put your form elements. This is important, 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 design view.

03
of 20

Choose List/Menu

Choose List/Menu
How to Create a Drop-Down Menu in Dreamweaver Choose List/Menu. Screen shot by J Kyrnin

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.

04
of 20

Special Options Window

Special Options Window
How to Create a Drop-Down Menu in Dreamweaver Special Options Window. Screen shot by J Kyrnin

In the Dreamweaver Options there is a screen on Accessibility. I choose to have Dreamweaver show me all accessibility attributes. And this screen is the result of that. Forms are a place where many Web sites fall down in accessibility and by filling out these five options your drop-down menus will immediately be more accessible.

05
of 20

Form Accessibility

Form Accessibility
How to Create a Drop-Down Menu in Dreamweaver Form Accessibility. Screen shot by J Kyrnin

The accessibility Options are:

  • Label
    This is the name for the field. It will show up as text beside your form element.
    Write what you want to call your drop-down menu. This 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 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 to not use the label tag at all.
    I prefer to use the for attribute, as then if I need to move the label for some reason it will still be attached to the correct form field.
  • Position
    You can place your label before or after the drop-down menu.
  • Access key
    This is the key that can be used along with the Alt or Option keys to get directly to that form field. This makes your forms very easy to use without needing a mouse. How to Set Up an Access Key in HTML
  • Tab index
    This is the order in which the form field should be accessed when using the keyboard to tab through the Web page. Understanding the Tabindex

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

06
of 20

Select the Menu

Select the Menu
How to Create a Drop-Down Menu in Dreamweaver Select the Menu. Screen shot by J Kyrnin

Once you have your drop-down menu displaying in design view, you need to add the various elements to it. 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 selected it.

07
of 20

Menu Properties

Menu Properties
How to Create a Drop-Down Menu in Dreamweaver Menu Properties. Screen shot by J Kyrnin

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

08
of 20

Add New List Items

Add New List Items
How to Create a Drop-Down Menu in Dreamweaver Add New List Items. Screen shot by J Kyrnin

To add new items to your menu, click on the "List values..." button. This will open the above window. Type in your item label in the first box. This is what will display on the page. If you leave the value blank, that is also what will be sent in the form.

09
of 20

Add More and Reorder

Add More and Reorder
How to Create a Drop-Down Menu in Dreamweaver Add More and Reorder. Screen shot by J Kyrnin

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.

10
of 20

Give All Items Values

Give All Items Values
How to Create a Drop-Down Menu in Dreamweaver Give All Items Values. Screen shot by J Kyrnin

As I mentioned in step 8, if you leave the value blank, the label will be sent 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.

11
of 20

Choose a Default

Choose a Default
How to Create a Drop-Down Menu in Dreamweaver Choose a Default. Screen shot by J Kyrnin

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.

12
of 20

See Your List in Design View

See Your List in Design View
How to Create a Drop-Down Menu in Dreamweaver See Your List in Design View. Screen shot by J Kyrnin

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

13
of 20

See Your List in Code View

See Your List in Code View
How to Create a Drop-Down Menu in Dreamweaver See Your List in Code View. Screen shot by J Kyrnin

If you switch to code view, you can see that Dreamweaver adds your drop-down menu in with very clean code. The only extra attributes are ones that we added with accessibility options. The code is all indented and very easy to read and understand. It even puts in the selected="selected" attribute because I've told Dreamweaver that I default to writing XHTML.

14
of 20

Save and View in Browser

Save and View in Browser
How to Create a Drop-Down Menu in Dreamweaver Save and View in Browser. Screen shot by J Kyrnin

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.

15
of 20

But It Doesn't DO Anything

But It Doesn't DO Anything
How to Create a Drop-Down Menu in Dreamweaver But It Doesn't DO Anything. Screen shot by J Kyrnin

The menu we created above looks fine, but it doesn't do anything. In order to get it to do something, you need to set up a form action on the form itself, which is a completely other tutorial.

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.

16
of 20

Jump Menu Window

Jump Menu Window
How to Create a Drop-Down Menu in Dreamweaver Jump Menu Window. Screen shot by J Kyrnin

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 that that link should go to.

17
of 20

Add Items to Your Jump Menu

Add Items to Your Jump Menu
How to Create a Drop-Down Menu in Dreamweaver Add Items to Your Jump Menu. Screen shot by J Kyrnin

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

18
of 20

Jump Menu Options

Jump Menu Options
How to Create a Drop-Down Menu in Dreamweaver Jump Menu Options. Screen shot by J Kyrnin

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 at the in a new window or elsewhere.
  • Menu name
    Give your menu a unique ID for the page. This is required so that the script will work correctly. It also allows you to have multiple jump menus in one form - just 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 insure that that item stays default on the page.
19
of 20

Jump Menu Design View

Jump Menu Design View
How to Create a Drop-Down Menu in Dreamweaver Jump Menu Design View. Screen shot by J Kyrnin

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 do edit it, make sure not to change any IDs on the items, otherwise the script may not work.

20
of 20

Jump Menu in Browser

Jump Menu in Browser
How to Create a Drop-Down Menu in Dreamweaver Jump Menu in Browser. Screen shot by J Kyrnin

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