Creating a Jump Menu with Javascript
Currently the Jump Menu with Javascript is not fully accessible. The WAC recommends only using this method as a secondary menu and NOT as a primary menu.
Create a Jump Menu using JavaScript by copying the code below
anywhere between the <body></body> tags
of the page that you would like the menu to display in. The code works
in the following way:
NOTE: By NOT defining a value for the first option, if a user were to have this option selected and then click on the Go button they would not be redirected anywhere.
Defining the Go button:
- The onClick JavaScript command is used to tell the
browser what to do when the Go button is clicked. Note: keyboard users
may experience some difficulty using "OnClick." Use "OnKeyPress" as
well to avoid these issues.
- onClick is set to = location, where "location" is where the browser should go once the button is clicked.
- Therefore location in this example is set to = document.jump.menu.options[document.jump.menu.selectedindex].value.
- Where document is the current page that is displayed in the browser.
- jump is a refrence to the form name="jump".
- menu is the select element which is named in this example "menu".
- Thus, document.jump.menu.options[documents.jump.menu.selectedindex].value is telling the browser to get the value (i.e., in this example, the url of the page the user wants to jump to) of the option that is currently selected (document.jump.menu.selectedindex) by the user.
<form name="jump">
<p align="center">
<select name="menu">
<option selected>Quick Links(Chose one) </option>
<option value="http://www.wac.ohio-state.edu/events.htm">WAC Events</option>
<option value="http://www.wac.ohio-state.edu/worksops/index.html">WAC Workshops</option>
<option value="http://www.wac.ohio-state.edu/tutorials/index.html">WAC Tutorials</option>
<option value="http://www.wac.ohio-state.edu/standards/index.html">WAC Standards</option>
<option value="http://www.wac.ohio-state.edu/resources/index.html">WAC Resources</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>
Creating a Jump Menu Server-Side
This method of creating a Jump Menu is fully accessible
and can be used as a primary menu. However, it requires that your web
server supports ColdFusion.
Another way to create a Jump Menu without using Javascript
is to rely on a server-side redirect. You can use any server-side script
(i.e. asp, jsp, cfm, php). This example uses ColdFusion.
- First you have your standard form code which is shown below. Notice that
the input type has been changed from "button" to "submit" and
that there is NO call to the onClick function. When the user selects one
of the options that value will be stored in a variable and sent to the page
cfmredirect.cfm which is defined using the action="" tag.
NOTE: Here there needs to be a value for the first option even though
it is not supposed to take the user anywhere. If the user accidentally chooses
the "Submit" button, it reloads the current page and puts the cursor at the
same location on the page.
<form method="post" action="cfmredirect.cfm">
<div align="center">
<select name="menu2">
<option selected value="http://www.wac.ohio-state.edu/tutorials/forms/jumpmenu.htm#jump">Jump Menu(Server-Side)</option>
<option value="http://www.wac.ohio-state.edu/events.htm">WAC Events</option>
<option value="http://www.wac.ohio-state.edu/workshops/">WAC Workshops</option>
<option value="http://www.wac.ohio-state.edu/tutorials/index.html">WAC Tutorials</option>
<option value="http://www.wac.ohio-state.edu/standards/index.html">WAC Standards</option>
<option value="http://www.wac.ohio-state.edu/resources/index.html">WAC Resources</option>
</select>
<input name="Submit" type="submit">
</form>
Below is the code for the cfmredirect.cfm page.
- First there is a cfif statement which ensures that the user arrived at the page by submitting a form and not by typing in the URL.
- When a user selects an option it gets submitted into the variable called #FORM.[name of the select element]# (in this case FORM.menu2).
Next the cflocation tag is used to redirect the user to the URL set by the #FORM.menu2# variable.
- The cfabort tag then tells the coldfusion page to stop processing the page.
<cfif IsDefined("FORM.Submit")>
<cflocation url="#FORM.menu2#">
<cfabort>
</cfif>
Note: If the user engages
the BACK button after jumping via the server-side method, the user is
correctly returned to the jump menu page, not the ColdFusion page.
|
1760
Neil Ave 
