Creating a Forms-Based Navigation Menu with Javascript

Forms are used throughout the Web. You can select items from a list, click on "radio buttons," and enter text into fields. If you've used a search site on the Web, such as Lycos, Yahoo, or AltaVista, you've most likely used a form. In this primer, I'll explain how to use a select list to create a forms-based navigation menu.

Forms:

Forms are created using the <FORM> tag. Between the <FORM> and </FORM> tags, you can specify the type of form using the tags <INPUT>, <SELECT>, <OPTION>, <TEXTAREA> and <LABEL>. These tags, and their accompanying attributes, allow you to specify the appearance and behavior of the forms you create. To read more about forms, please visit the forms links page.

Select Lists:

The <SELECT> tag allows you to create a pull-down or pop-up menu. (Whether the form appears as one or the other depends on where the form is located relative to the top or bottom of your browser window. If it's far enough above the bottom of the window, the list will drop down; otherwise, it will pop up.) A select list contains a set of choices.

Example: A Simple Select List

	
<FORM NAME="Color_List" ACTION="" METHOD=POST><SELECT>
			 
   <OPTION Value="I did not fill out this form" 
   SELECTED>My Favorite Color is:
   
   <OPTION VALUE="green">Green
			 
   <OPTION VALUE="blue">Blue
			 
   <OPTION VALUE="red">Red
			 
   <OPTION VALUE="yellow">Yellow
			 
   <OPTION VALUE="Orange">Orange
			 
   <OPTION VALUE="Purple">Purple
			 
   <OPTION VALUE="None of the Above">None of the Above

   <OPTION VALUE="I am Color Blind">I am Color Blind
   
   </SELECT>
</FORM>

This form doesn't actually do anything, since it needs to be connected to either a CGI-script (a script that runs on the Web server) or a javascript (a script which runs on your browser). But this form does illustrate the key elements of a pull-down menu:

the <FORM> and </FORM> tags, which must surround the form code
the ACTION and METHOD attributes of the form tag, which can take various values (see the list of tutorials and resource pages on forms)
the <SELECT> and </SELECT> tags, which surround the list of options in the list
the <OPTION> tag, with its attributes VALUE and SELECTED (the latter indicating which element in the list is displayed in the title bar of the form

Turning a Select List into a Navigation Menu

To turn a select list into a navigation menu, you need to provide a a list of URLs and a script that will run when an item in the list is selected. I use the following script because it allows me to target the URL to a particular frame. You can target the link to a frame on the page you are currently viewing, or you can target it to a new window. If you target it to a new window, you can control the size and appearance of that window. (I obtained this script from the fine folks at the NetObjects Workbench site and I greatly appreciate their thoughtfulness in providing it.)

<HTML>
<HEAD>
   <TITLE>Forms Navigation Menu Example</TITLE>
   <script language="JavaScript">
   <!-- Hide the script from old browsers --
   function surfto(form) {
      var NewWindow=window.open('','popup','menubar=1,toolbar=1,location=1,directories=1,scrollbars=1,resizable=1,status=1,width=640,height=480');
	     NewWindow.focus();
      var myindex=form.dest.selectedIndex 
      window.open(form.dest.options[myindex].value,target="popup");
  }
  // -->
</SCRIPT>
</HEAD>

This script, when activated by the link, opens the specified html file in a window named "popup". If the window has already been opened, it will bring it to the front of the desktop (in front of every other window on your computer's desktop) regardless of whether it has been minimized or just hidden behind other windows. If this script is used on a framed page that has a frame named popup, it will open the file in the popup frame and ignore the parts of the script that specify the size and appearance of the window (see below).

To control the size and appearance of the window, you can set the following values in the script:

Attribute	Definition and Values
menubar	Determines whether the menubar is displayed in the browser window. 1 = yes; 0 = no.
toolbar	Determines whether the toolbar is displayed in the browser window. 1 = yes; 0 = no.
location	Determines whether the location bar is displayed in the browser window. 1 = yes; 0 = no.
directories	Determines whether the directories toolbar is displayed in the browser window. 1 = yes; 0 = no.
scrollbars	Determines whether scrollbars are displayed in the browser window. 1 = yes; 0 = no
resizable	Determines whether the window can be resized. 1 = yes; 0 = no.
status	Determines whether the status bar is displayed in the browser window. 1 = yes; 0 = no.
width	Specifies the width of the browser window, in pixels.
height	Specifies the height of the browser window, in pixels.
Window Name	In this script, the window or frame name (which determines how it is targeted in a link, see the discussion of Frames) is specified immediately before menubar. In this script, the name of the window is "popup".

This script, when activated by the form (see the form code below), opens the link in a window or frame defined by the target (in this case, a new window called "popup"). You can change the window or frame that is targeted by simply changing the name.

To link this script to a navigation menu, you need to modify your <FORM> code as follows:

<FORM NAME="Links" ACTION="" METHOD=post>
<SELECT ID="Links_List" NAME="dest" onchange= "surfto(this.form)">
    <OPTION VALUE="primer_formnav.cfm#menu" SELECTED>Useful Links
    <OPTION VALUE="links_html.cfm">HTML Tutorials and Resources
     <OPTION VALUE="links_forms.cfm">HTML Forms
     <OPTION VALUE="links_graphics.cfm">Web Graphics
     <OPTION VALUE="links_javascript.cfm">JavaScript Tutorials and Resources
     <OPTION VALUE="links_maps.cfm">Client-Side Image Maps
</SELECT>
<INPUT TYPE=button NAME="Menu_Button" VALUE="View" 
ID="Menu_Button" onclick = "surfto(this.form)">
</FORM>

The key elements in the form code are:

METHOD=post in the <FORM> tag, which tells the form to "post" the information to the script listed above
NAME=dest in the <SELECT> tag, which is used as an identifier in the script
onclick="surfto(this.form)" in the <SELECT> tag, which is used by Microsoft Internet Explorer 4.x and above to activate the script when the form is changed (this is ignored by Netscape Navigator 4.x and below)
onclick="surfto(this.form)" in the <INPUT> tag, which is activated by either browser when the button is clicked on with the mouse (this is the only way that Netscape Navigator 4.x and below can activate the script)
The link to "primer_formnav.cfm#menu", which is the precise location in this file of the menu. If you click on the "View" button without selecting one of the guides, it will reload the page at its current location.

By using the onchange attribute in the <SELECT> tag, you allow people browsing your site with Internet Explorer to navigate with one less mouse click. If you'd like, you can make sure that everyone is treated the same by removing this bit of code from your form.

If you'd like, you can try the navigation menu:

Links Page: Learn more about Forms on the Forms links page.

Links Page: Learn more about Javascript on the Javascript links page.

Coding Primer: Learn more about Javascript in Using Javascript.

View the coding primer, Using Javascript to learn about other useful javascripts.

Writing Guides

Writing for the Web