Drop-Down Link Menu

Tehp…

I’m not sure how many different ways I’m going to be able to keep coming up with to misspell and make plays on the word “tip”.

OK! We start a new tip. This tip is a basic drop down link menu. I remember very well when this form of creating links came out. Everyone wanted to know how to do it. Because of that, everyone tried at once and many different methods of getting a FORM-based drop down menu to act as links started floating around the Web. This is a very basic format. I think it’s a good one, but just keep in mind that this certainly isn’t the only way of getting the job done.

As you’ll see, this link menu uses a button to trigger its effect. That can be eliminated and after we understand how this format works, we’ll alter the script a bit so that the button isn’t required. It’ll just make the link when the user chooses from the menu.

This format works outside of frames. After the no-button version, we’ll alter again so it works within a frames format by loading its URLs into a separate frames window. Basically we’re going to beat this drop down menu to death.

Here’s the first version of the Script and its effect:

 
<SCRIPT LANGUAGE="javascript">

function LinkUp() 
{
var number = document.DropDown.DDlinks.selectedIndex;
location.href = document.DropDown.DDlinks.options[number].value;
}
</SCRIPT>

<FORM NAME="DropDown">
<SELECT NAME="DDlinks">
<OPTION SELECTED>--> Choose a Link <--
<OPTION VALUE="http://www.yahoo.com""> Page One
<OPTION VALUE="http://www.cnn.com"> Page Two
<OPTION VALUE="http://www.earthweb.com"> Page Three
</SELECT>

<INPUT TYPE="BUTTON" VALUE="Click to Go!" onClick="LinkUp()">
</FORM>

We’ll get underway by once again starting from the bottom up. Here’s the HTML that creates the drop down box and the button:

 
<FORM NAME="DropDown">
<SELECT NAME="DDlinks">
<OPTION SELECTED>--> Choose a Link <--
<OPTION VALUE="http://www.yahoo.com"> Page One
<OPTION VALUE="http://www.cnn.com"> Page Two
<OPTION VALUE="http://www.earthweb.com"> Page Three
</SELECT>

<INPUT TYPE="BUTTON" VALUE="Click to Go!" onClick="LinkUp()">
</FORM>

Next, we’ll set up the select box and give it a name. We’ll call this one DDlinks. Still with me?

The first “option” is the one that will display so we will not give that a VALUE. It will display the text:
“–> Choose a link &lt–“.

Next we start listing the options that will be used to create links. Each is given a VALUE that represents the link it will point towards. Now, I only have that page name because the files I’m linking to are in the same directory. If you want to set this to links outside of your site, just put the entire URL in for the VALUE. For instance:

 
<OPTION VALUE="http://www.yahoo.com"> 

The </SELECT> ends the drop down box.

The button comes next.

 
<INPUT TYPE="BUTTON" VALUE="Click to Go!" onClick="LinkUp()"> 

Finally, an </FORM> wraps up the FORM elements of this script’s HTML side. Now that we know the players, we can go after the function.

Next Time: The Function