Site Navigation

5. No Button Navigation

With Javascript you can even get rid of the button and have the transfer take place immediately when an entry is selected from the drop down list. To do this we attach the code to the select tag instead of to a separate button and use onmouseup instead of onclick to ensure that the transfer does not take place too soon. Since this code is on the select itself we can simplify our references from document.ex2.xfer.selectedIndex to this.selectedIndex. Note that this means that a transfer to the selected page will always take place when someone opens the list to see what it contains, they can't decide not to transfer. The code for this is as follows:

<form name="ex2" method="POST">
<div align="center">
<select name="xfer" size="1"
onmouseup= "location = '' + this.options[this.selectedIndex ].value;">
<option value="bltime1.htm">Introduction</option>
<option value="bltime2.htm">Get the Script</option>
<option value="bltime3.htm">Configure the Script</option>
<option value="bltime4.htm">Daylight Saving</option>
</select>
</div></form>

Of course the Javascript options will only actually work when your visitor has javascript enabled so you might want to include the entire code within javascript document.write statements so that the non-functional drop down does not appear when javascript is not enabled. Alternatively we can combine the javascript and PHP versions to give a version that works on all browsers but only displays the button on browsers without javascript.

Note that the script and the descriptions of the functions that it contains are rewritten from the "Ask Felgall" website with the permission of the copyright owner.