JavaScript Implementation
The main function that does the hard work is as follows:
<SCRIPT LANGUAGE="JavaScript">
<!--
function menu_goto( menuform )
{
// see http://www.thefreecountry.com/articles/javascriptmenu.html
// for an explanation of this script and how to use it on your
// own site
selecteditem = menuform.newurl.selectedIndex ;
newurl = menuform.newurl.options[ selecteditem ].value ;
if (newurl.length != 0) {
location.href = newurl ;
}
}
//-->
</SCRIPT>
Put in in the <HEAD> section of your web page or, if you prefer, just before the
drop down menu code (see below).
The function takes a single argument - the form object. It then proceeds to extract the selected value from the object and load the browser from that URL.
If your site is designed with frames, you will need to use "top.location.href" instead of "location.href" if you want the new document to replace your all your frames (such as when you have a URL that leaves your website). You can leave it as it is if you want the document to appear in the current frame. Alternatively, if you want it to be in another frame (sibling of the one in which the menu appears), just replace "location.href" with "parent.your_frame.location.href" where "your_frame" is the frame named "your_frame".
Now for the menu itself. Since the exact URLs for your menu and the items will differ for your site, you should modify the code given below for your situation.
<form name="menuform">
<select name="newurl" onchange="menu_goto(this.form)">
<option value="">----- Select A Page -----
<option value="index.html">Home
<option value="feedback.html">Feedback
<option value=""> ---- Other Good Sites ----
<option value="http://www.thefreecountry.com/">thefreecountry.com
</select>
<input type=submit value="Go!" onclick="menu_goto(this.form)">
</form>
As written, whenever the user selects an item, he will immediately be transported to that page, even if he has not clicked on "Go!" button. If you don't like this behaviour, simply remove the "onchange" attribute for the "select" tag. That is, your select tag should be modified to look like:
<select name="newurl">
The user will then have to click the button to go to the new URL.
If, on the other hand, you like the default behaviour of automatically transporting the user to the new page when he changes the selection, you can remove the submit button since it will never be used. That is, remove the line that reads:
<input type=submit value="Go!"
onclick="menu_goto(this.form)">
If you prefer not to tamper with the above code, you can leave it as it is and the menu will still function well.
There are, however, certain changes to the code that are unavoidable: in particular, you need to adapt the linked-to pages for your site. As the sample code stands, it only gives the user the option to go to your index.html and feedback.html pages as well as to http://www.thefreecountry.com/. To adapt it for your site, put the actual page name in the value attribute of each option tag, and put the title of the page that you want displayed after the tag. So, if for example you wanted to put a link to your Company Information page, which has a URL of companyinfo.html relative to the current page, you would add a tag like the following:
<option value="companyinfo.html">Company Information
If you like, you can always use the complete URL of each page, so that you need not worry about broken links when you cut and paste the menu to pages located in subdirectories.
Next Step: Changing Your Pages >>