Dreamweaver - Forms - Adding a jump menu

Go to the forms tab on the Insert menu:

Click on the

icon to create a new form. In Design view, the form is outlined by a dashed red line.

Once you've created a form, move your cursor inside the form area. Then click on the

icon to create a new jump menu. This will pop up a window like this:

The "+" button lets you add another entry.
The "-" button takes out the selected entry.
The up and down arrows let you arrange the entries.
The "Menu Items" list lets you select an entry to edit. The label used here is generated automaticly.
The "Text" field lets you edit what text the user will see for that entry in the list.
The "When Selected, Go To URL" field lets you type in the link to the website you want the user to go to when they select that entry.
Everything below the horizontal rule applies to the entire jump menu, not individual entries.
The "Open URLs In" menu lets you specify which frame the link will open in. If you are not using frames, then this will only have one option, "Main Window".
The "Menu Name" field is the name of the jump menu.
The "Insert Go Button After Menu" checkbox lets you specify if you want the user to have to click on a button labeled "Go" right next to the menu, or if they should jump to the new page as soon as they select a different entry. *Note: if you do not use the "Go Button" option, then the user cannot select the first entry in the list. If you need the user to be able to select the first entry, you can set up a dummy entry (an entry labeled something like "select one from below" that doesn't link to anything) and shift everything down.
The "Select First Item After URL Change" checkbox resets the menu after the user jumps somewhere. This only matters if the jump menu is opening the link somewhere besides "Main Window".

Jump menus are a variation of list menus that act as links. Whenever the user selects a different entry from the menu or clicks on a "Go" button next to the list, they "jump" to a new page. Try using the jump menu below: Here's the code for that example:

<form name="myForm">
<center><table width="60%" border="1" bgcolor="#dddddd"><tr><td><table width="100%" border="0">
 <tr>
  <td width="33%" align="left">Choose a page to jump to:</td>
  <td width="34%" align="center">
   <select name="menu1">
     <option value="dw_form_jumpmenu_test1.tmpl" selected>Page 1</option>
     <option value="dw_form_jumpmenu_test2.tmpl">Page 2</option>
     <option value="dw_form_jumpmenu_test3.tmpl">Page 3</option>
   </select>
  </td>
  <td width="33%" align="left"><input type="button" name="Button1" value="Go" onClick="MM_jumpMenuGo('menu1','parent',0)"></td>
 </tr>
</table></td></tr></table></center>
</form>

If you are adding the jump menu by typing in the code yourself, you need to remember to add these javascript functions to the page:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_jumpMenuGo(selName,targ,restore){ //v3.0
  var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
}
//-->
</script>

If you want to change the properties of the jump menu, right click on it and select what you want to edit.

Selecting "Name..." pops up a window that allows you to change the name of the jump menu.

Selecting "List Values..." pops up a window that allows you to change the entries in the jump menu.

The "Item Label" column is the text that will appear to the user.
The "Value" column is the value that will be associated with that entry.
The "+" button lets you add another entry.
The "-" button takes out the selected entry.
The up and down arrows let you arrange the entries.

Selecting "Edit Tag <select>..." allows you to change all of the attributes at once:

The "Name" field is the name of the list menu.
The "Size" field is how many rows will be visible to the user. It is useful to set this number higher (3, 4, 5) when the user is allowed to select multiple items. The list menu will only function as a pull-down menu when this number is 1, which is the default.
Checking the "Allow Multiple Selections" checkbox makes it where the user can hold "Shift" or "Ctrl" and select more than one entry. This option should not be enabled for jump menus.
Checking the "Disabled" checkbox greys out the list menu and does not allow the user to select anything.

Select "Edit Tag Code <select>..." if you want to edit the tag properties by hand.

Alternatively, you can change the properties of the jump menu through the properties menu:

The box under the words "List/Menu" is the name of the list menu.
The "Menu" radio button makes the list menu work like a pull-down menu. This option should be enabled for jump menus.
The "List" radio button makes the list menu work like a list (it still works like a pull-down menu if you set the height to 1 and do not check the "Allow multiple" checkbox). Selecting the "List" radio button also enables the "Height" field and "Allow multiple" checkbox. This option should not be enabled for jump menus.
The "Height" field is how many rows will be visible at a time. This is only enabled if the "List" radio button is selected.
The "Allow multiple" checkbox allows the user to hold "Shift" or "Ctrl" and select additional entries. This is only enabled if the "List" radio button is selected.
The "List Values..." button brings up the window to edit entries in the list menu.
The "Initially Selected" list allows you to set which entry is selected by default.

Dreamweaver Home

CTU > Reference Desk > Web Development > Dreamweaver > Forms