Drop Shadow

Go Menu

You may have seen pages that have menus where, if you pull down the menu and then click on a “Go” button, you go to a different new page for each menu selection. Sometimes, these “go” menus will be automatic: as soon as you make a selection, you go to the new page.

For example, choose one of these web pages, and then use your “back” button to return to this help page:

The Basics

If you want to create pull-down menus like the one above, you can use the following format:

<form method="post" action="/path/to/this/page.php"> <p> <select name="link"> <option value="http://www.sandiego.edu/ITS/">ITS</option> <option value="http://www.sandiego.edu/unet/">Your Account Info</option> <option value="http://home.sandiego.edu/~jerry/">Jerry Stratton</option> </select> <input type="submit" value="View Your Choice!" /> </p> </form>

Replace the URLs above with your own URLs, and replace the title of the pages with the titles as you want them to appear in the list. You can add as many “option” items as you want.

At the very top of your page, put this PHP code:

<? include('/web/include/gomenu.phpi');; ?>

Advanced options

The golink cgi will accept any URLs in the “link” field. You can create a list of URLs with radio buttons or even allow the reader to type one in.

<input type="radio" name="link" value="http://thehostname/thepath" /> <input type="text" name="link" value="Type Your URL Here!" />

If you allow them to choose more than one, only the last one that the CGI receives will be used by the CGI. This means that checkboxes are less than useful, because you never really know the order that the web browser and server will send the information to the CGI.

One-click redirection

You can use javascript to make the redirection occur as soon as they let go of the pull-down menu. Be careful using this! In many circumstances, people will not expect pull-down menus to do anything immediately.

You will also want to continue including the button, for those people who do not have javascript, or who have it turned off.

To the form above, change the <select name="link"> line to read:

<select name="link" onchange="window.location=(this[selectedIndex].value)"> <option value="" selected="selected">Choose Your Destination</option>

You might want to just go ahead and copy it. It will then work like this:

Note that I also added another option so that the user must actually select a destination instead of having one preselected.

Comments