How To Create A Drop Down Menu

	<a href="http://leader.linkexchange.com/X1515329/clickle" target="_top"><img width=468 height=60 border=0 ismap alt="" src="http://leader.linkexchange.com/X1515329/showle?"></a>



		SEARCH THE SITE advanced search <A HREF="http://www.eurosubmit.com/eurosubcgi/ads.pl?member=me853;banner=NonSSI;page=01" TARGET="_blank"><IMG SRC="http://www.eurosubmit.com/eurosubcgi/ads.pl?member=me853;page=01" WIDTH=120 HEIGHT=50 ALT="EuroSubmit MiniBanners" BORDER=0></A> CATEGORIES Home Getting Started HTML Cheat Sheet Webmaster Tools HTML Help Forum Color Codes Link to us

Drop Down Menu/Combo Box

Drop Down Menu's (Also known as Combo Box's) are a great way to organize a website. They allow you to place a large amount of link's into a a small area. If your wondering what a Drop Down Menu looks like, here's and example:

Creating a Drop Down Menu is simple, to create one just copy and paste the following code to your website where you would like the Drop Down Menu to appear:

<form name="gotolocation1" method="POST">
<select name="DDMenu" size=1>
<option value="http://www.link1.com">Link 1</option>
<option value="Http://www.link2.com">Link 2</option>
<option value="http://www.link3.com">Link 3</option>
</select>
<input type="button" onClick="location =
document.gotolocation1.DDMenu.options
[document.gotolocation1.DDMenu.selectedIndex].value;"
value="Go">
</form>

This Drop Down Menu would look like this:

To change the link's within the menu, just replace the information that is in black text with your own information.

If you want more link's, just add more <Option> code's to your script, for exmple:

<option value="Http://www.link1.com">Link 1</option>
<option value="Http://www.link2.com">Link 2</option>
<option value="Http://www.link3.com">Link 3</option>
<option value="Http://www.link4.com">Link 4</option>
<option value="Http://www.link5.com">Link 5</option>
<option value="Http://www.link6.com">Link 6</option>
etc.. etc.... etc....

If you notice, the drop down menu has a "name", the name of this menu is DDMenu, you can rename it to whatever you want. For example "MyLinks". Whatever you choose to name it, replace all 3 DDMenu with the name you choose.

Note: If you choose to have more than one drop down menu on your page, each Menu must have a DIFFERENT name. If you create 2 menu's with the same name you will get errors on your page.

If you don't like the "GO" button, you can remove it, your code would look like this:

<form name="gotolocation1" method="POST">
<select name="DDMenu" size=1 onchange="location.href=(form.DDMenu.options[form.DDMenu.selectedIndex].value)">
<option value="0">Choose One</option>
<option value="0"></option>
<option value="http://www.link1.com">Link 1</option>
<option value="Http://www.link2.com">Link 2</option>
<option value="http://www.link3.com">Link 3</option>
</select>
</form>

This Menu would look like this:

You can also change the color, size, and type of font, and the background color of your Drop Down Menu. You do this by using the Style Command. The only downside to this is, it doesn't display the color in ALL BROWSERS, so not all the people who visit your site will see color in your dropdown menu , most of them, but not all. Only Newer browsers like Internet Explorer and Netscape 4.0 and up will see the colors, everyone else will see the regualar colors of the drop down menu like the ones we made above.

To add color to your Menu, just copy and paste the code below into the first <select> code in your script:

style="font-family: comic sans ms"
style="color: #003399"
style="border: outset"
style="font-size: 12"
style="background: #003366"

If you were to put this into your Drop Down Menu code your entire code would look something like this:

<form name="gotolocation1" method="POST">
<select name="DDMenu" size=1 onchange="location.href=(form.DDMenu.options[form.DDMenu.selectedIndex].value)"
style="font-family: comic sans ms"
style="color: #003399"
style="border: outset"
style="font-size: 12"
style="background: #003366">
<option value="0">Choose One</option>
<option value="0"></option>
<option value="http://www.link1.com">Link 1</option>
<option value="Http://www.link2.com">Link 2</option>
<option value="http://www.link3.com">Link 3</option>
</select>
</form>

This Menu would look like this:

Now if you where using the Menu with the "GO" button next to it, your code would look like this:

<form name="gotolocation1" method="POST">
<select name="DDMenu" size=1
style="font-family: comic sans ms"
style="color: #003399"
style="border: outset"
style="font-size: 12"
style="background: #003366">
<option value="http://www.link1.com">Link 1</option>
<option value="Http://www.link2.com">Link 2</option>
<option value="http://www.link3.com">Link 3</option>
</select>
<input type="button" style="font-family: comic sans ms"
style="color: #FFFFFF"
style="font-size: 12"
style="background: #003366" onClick="location =
document.gotolocation1.DDMenu.options
[document.gotolocation1.DDMenu.selectedIndex].value;"
value="Go">
</form>

This Menu would look like this:

Company | Careers | Partners | Advertising | Help
Privacy Policy | Trademark Notices | User Agreement
© 2001 TheHTMlSource.com, INC. All Rights Reserved.

Site hosted by Angelfire.com: Build your free website today!