|
JavaScript Tip:
Select And Go Menus In JavaScript
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Standard navigation menus let you navigate through a Web site by selecting a destination and clicking on the "GO" button. That requires two mouse clicks: one to select the option and the second on the "GO" button. Save your visitors that extra click and give your site a snappier look and feel with a simple JavaScript function.
Create A Select And Go Menu
Select and Go menus are easy to create in JavaScript and provide a space saving way to include site navigation on your Web page. They are a variation on basic SELECT menus used on many Web pages. The only difference from a standard SELECT menu is that, in a Select and Go menu, the SELECT tag uses the onChange event to call a JavaScript funtion.
In this example, we're going to create a SELECT menu that you can use to navigate through NetMechanic's Web tools. The first option - "Explore our site" - is merely descriptive: it doesn't take you anywhere, and just explains the purpose of the menu. The other options will take you to free trials of our Web tools. Use your browser's BACK button to return to this article.
|
Select and Go Menus With JavaScript
Use the menu options to navigate through the NetMechanic Web Site
|
Include this JavaScript function definition inside the HEAD section:
In the changePage function, the value of newLoc.selectedIndex will equal from 0 to 4 because there are five possible choices in the select list. One confusing aspect of JavaScript is that it often begins counting with 0 instead of 1. In this case, JavaScript counts the option value "Explore Our Site" as 0 because it's the first value.
When you select an option, that value between 0 and 4 is passed to the variable nextPage. The function doesn't change the page if the descriptive value (Explore our site) is the selected value. If any other value is selected, your visitor's browser requests the selected page URL from the server.
The actual HTML code for the SELECT menu goes in the BODY, inside a FORM tag:
Non-JavaScript Browsers
Some of your visitors may have JavaScript turned off in their browsers. Others may be using browsers (like WebTV) that don't offer full support for JavaScript. Since you're relying on the changePage function to load the selected page, the menu doesn't work without JavaScript. The solution is to include a Go button that displays if the browser doesn't recognize JavaScript.
You'll need to have access to a CGI bin on your server though, since a CGI script is the only other way to change pages within a form. Most web hosts have predefined CGI scripts that you can include on your Web page. Check with your host to see if they have a CGI script to jump from one page to another. You can also browse through free CGI scripts at the CGI Resource Index.
You will have to change your FORM tag slightly and add a <NOSCRIPT> tag:
The opening FORM tag should read:
Note that you've changed the form method from POST to GET and added a form action to call the name of the CGI script. So, if JavaScript isn't enabled, the form calls and executes the CGI script. Enclose the Go button in the <NOSCRIPT> tag. The button will only display if JavaScript isn't enabled:
Put the NOSCRIPT tag after the </SELECT> tag, before the closing FORM tag.
|
