1. Technology

Video:How to Create a Drop-Down Menu in Dreamweaver

with Herman Mak

Drop-down menus in websites use specific coding designs. Watch this About.com video to create a drop-down menu using Adobe Dreamweaver CS6.See Transcript

  • All Videos
  • All Technology Videos
  • Web Design/HTML Videos

Transcript:How to Create a Drop-Down Menu in Dreamweaver

Hi, I’m Herman Mak for About.com, and today I’m going to show you how to make drop-down menu in Dreamweaver.

Two Types of Drop-Down Menus:

The first one is the select list/menu which is use for selecting data value in a form which is commonly useful for surveys, mailto forms and so on.

The second one is the jump menu which is use for navigation.

List Menus in Dreamweaver

Let's make a select list/menu together, follow me along. In a new HTML page...

Click "insert" -> "form" and choose "form". Here you will see a red-dotted line box which indicates that is the area of the form.

Click "insert" -> "form" and click "select list/menu"
Input a name for the ID which is a name that you want this whole menu to be called.
Input a name for the LABEL which is a name that this menu will be shown on the page
In Style you can choose one of the three according to your coding needs
In Position, this define the location of the LABEL to go before or after the item.
click "ok" and now the "select menu" is created. To change this to a "list" instead, click the menu item and on the property, change this from "menu" to "list" and now it is a drop down list.

Click "list value" to input what's on the menu

A menu is for a single selection only while a list is for multiple selections.

Jump Menus in Dreamweaver

Let's make a "jump menu" that is commonly use for navigation of webpages. We will start from the red dotted line box.

Click "insert" -> "form" and click "jump menu."
Here you can input your menu items by using the text fields and specifying it's destination in the URL field.
*You may click browse to select a file as well
To add or remove a menu item, click the + or - sign above or use the arrow keys to shift things up and down.
If you are using frames for the design, you may also select where the URL is to be displayed in. The menu ID, you can set a name for it as well.
If you like, you can click the two options below as well.

Here we will have the "GO" button in this example

When you are done with your menu, click "OK" and your menu is created!

Thanks for watching. To learn more about Dreamweaver, please visit About.com.
 

About videos are made available on an "as is" basis, subject to the User Agreement.

©2014 About.com. All rights reserved.