View Single Post
  #1  
Old 02-15-2011, 05:03 PM
Knyfe's Avatar
Knyfe Knyfe is offline
Things are looking harder
 
Join Date: Jan 2011
Location: MA, United States (That's one reason why I love this site XD)
Posts: 48
Gender: Female
Credits: 6,327
Knyfe is on a distinguished road
Default HTML Drop-down Menu

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.

Code:
<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:

Code:
<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)
Code:
<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)
Code:
<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. :)
__________________
Just because we all use the same script doesn't mean our websites can't be unique.
Please visit Shop 12.
Reply With Quote