HTML Drop-down Menu

[Knyfe]

Just a heads-up, this isn't the epic drop-down menu you've seen on some site, this is a simpler one, and it would look something like this:

Also, I'm not very good at making tutorials (this is my second one EVER) so it might be hard to understand or something like that. Anyway....

1. Set up the basic html tags: head, body, footer, etc. Choose where you want the menu, and set up the alignment tags or whatever you want to make sure it goes where you want it to go.

2. Copy and paste this code within the tags where you want it to go. Don't modify this code; it sets up the browser so it knows that you're going to add a menu, not the links and junk.

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
   {
   if(mySel.form.target)myWin = parent[mySel.form.target];
   else myWin = window;
   if (! myWin) return true;
   myWin.location = myVal;
   }
return false;
}
//-->
</SCRIPT>
<FORM 
     ACTION="" 
     METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Random Page

<OPTION VALUE="/tags/"                     >Random Page
<OPTION VALUE="/"                          >Random Page
<OPTION VALUE="http://www.ninthwonder.com" >Random Page

</SELECT>

3. Beneath the Select code, paste this:

<FORM 
     ACTION="" 
     METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="">
<OPTION VALUE="">Random Page

<OPTION VALUE="">Random Page
<OPTION VALUE="">Random Page
<OPTION VALUE="">Random Page

</SELECT>

<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>

4. Now my least favorite part. Modify the 2nd code (The Form code, as I call it) for your site. You can figure it out by yourself if you want to explore the code or aren't an immature coder like myself. Below is a step-by-step guide on what changes what in your menu.

A)

<FORM 
     ACTION="" 
     METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="hi">
<OPTION VALUE="">Random Page

Action can be ignored, as can Select Name. Option Value is the link the user will be taken to when they click on the first menu item. "Random Page" is the label of the first menu item. Change it to Adopt, and when the user clicks Adopt they'll be taken to "adopt.php." This is just my example though, obviously, so it can be anything you want (except maybe a fish tank).

B)

<OPTION VALUE="">Random Page
<OPTION VALUE="">Random Page
<OPTION VALUE="">Random Page

</SELECT>

<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>

Option Value and Random Page are the same for the rest of the code. Input Type=Submit Value controls the text on the Go button. You can literally change it to Fish Tank, but the effect when someone clicks on it will remain the same.

5. Test out your menu, modify the code, and perfect your website!

Questions? Problems? I've practiced a lot with the drop-down script so I can most likely help.

 

[Hall of Famer]

This is a very neat and informative tutorial, thanks for posting it Knyfe. I am sure it will help lots of people. ^^

 

[Knyfe]

Thanks! I know my way pretty easily around this script, so yeah. :3