How to create a javascript multi-link jump box
Posted: Sat Mar 24, 2007 3:10 pm
One of the best navigation methods through web sites is the use of multi-link jump boxes. The vast majority are CGI based, but you can also create a javascript jump box. It is really not difficult, as you will seee from the following example (the codes for a whole page with the multi-link jump box):
<HTML>
<HEAD>
<TITLE>Jump Box</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- Hide from old browsers
function jumpBox(list) {location.href =
list.options[list.selectedIndex].value}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM>
<SELECT>
<OPTION VALUE="index.htm">Home
<OPTION VALUE="../tutorials/index.html">Tutorials
<OPTION VALUE="../resources/index.html">Resources
</SELECT>
<INPUT TYPE="button" VALUE="Go"
****="jumpBox(this.form.elements[0])">
</FORM>
</BODY>
</HTML>
Now all you have to do is replace the file names and titles (for example you can use links.html as OPTION VALUE with Links as the visible title)
<HTML>
<HEAD>
<TITLE>Jump Box</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--- Hide from old browsers
function jumpBox(list) {location.href =
list.options[list.selectedIndex].value}
// end hiding --->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<FORM>
<SELECT>
<OPTION VALUE="index.htm">Home
<OPTION VALUE="../tutorials/index.html">Tutorials
<OPTION VALUE="../resources/index.html">Resources
</SELECT>
<INPUT TYPE="button" VALUE="Go"
****="jumpBox(this.form.elements[0])">
</FORM>
</BODY>
</HTML>
Now all you have to do is replace the file names and titles (for example you can use links.html as OPTION VALUE with Links as the visible title)