Site Navigation

2. Drop Down Navigation

The first thing that we need to do to set up our drop down list to provide site navigation is to specify the page to which each entry in the list will link to. We do this by adding a value="pagex.html" to each option tag identifying the name of the page that each individual option is to link to. The information to be supplied here is exactly the same as you would supply in the href= of a conventional link.

The next thing that we need to do is to add method="POST" to the form tag so that the form can perform an appropriate action when submitted. We have already given both the form and the drop down box their own names so that we will be able to refer to them when performing that action.

The last thing we need to add in a method of telling the form when to perform an action and what action to perform. The easiest way to do this is to add a button to our form. When the button is clicked the visitor will be transferred to their selected page.

For the purpose of this tutorial, let's say that we are looking at creating a drop down navigator to allow access to the different pages in my Author Time tutorial. Here is what our form would look like:

We can link to a server side script and/or use a small piece of javascript code to actually perform the transfer to the new page. Let's look at a server side solution using a PHP script first before looking at the Javascript solution. As we want the navigation to work for as many visitors as possible we will probably want to implement both solutions where possible.

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.