Drop Down Menu

Tired of boring plain, black and white drop downs?

Directions for customizing the drop down are below the directions for installing the drop down.

Try this working example:

Copy and paste this code into the head of your page, just above the </head> tag.

Copy and paste this code into the body of your page where you want the drop down to be.

<form name="form">
<select name="nav" size="1" style="font-family: Monotype Corsiva; color: #000000; background-color: #ffc800; font-size: 12pt; border-style: outset; border-color: #008080">
<option value="http://www.webdesigns-4-you.com/webmasters/html/index.htm">HTML Home</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/html_header.htm">The HTML Header</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/alert_box_popup.htm">Alert Box Pop UP</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/back_button.htm">Browser-like Back Button</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/comments.htm">Comments for your eyes only</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/basic_html_tags.htm">The Basic HTML Tags</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/frame_control.htm">Put a Page In its' Frame</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/frame_control.htm">Get OUT of that Frame</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/links.htm">All Kinds of Links</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/passprotect.htm">HTML Password Protection</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/redirect.htm">Redirection</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/add_sound.htm">Adding Sound to Your Page</option>
<option value="http://www.webdesigns-4-you.com/webmasters/html/text_area.htm">Text Area - Seen on Free Script Sites</option>
</select>
<input type="button" value="Go!" onclick="javascript:formHandler()">
</form>

Create YOUR Links

Copy and paste this line, then customize it:

When you look at the body code for the drop down, you will notice the above line repeated many times with little difference. Those are the links and the text a visitor views.

The URL is pretty easy to spot; change these to fit links you wish to create on your own site.

The text the visitor sees needs to be changed to reflect each of the links. See it there, right after the end of the URL? (Don't lose the > and < on either side of the text.)

More or Less Options?

If your drop down needs less options, just delete the ones not needed, being careful not to delete this code too.

If your drop down needs more options, just copy and paste from the ones provided to create more. They must be pasted in above this code.

Customizing the Drop Down

The code below is what you will need to change to customize the look of your drop down. We'll look at it one attribute at a time.

select name="nav"
- It doesn't matter what you call it, just make sure the "" are in place.
size=1
- This refers to the size of the font. Tiny fonts need to be a bit bigger, so remember, if your visitor doesn't have your chosen font installed, they will see their default font a bit bigger.
style="font-family:
- Font Name
- color: (use HEX values for best results) — this is the font color
- background-color — this is the background color of the drop down box
- font-size — start with a size 12pt, then make it bigger or smaller as needed
- border-style: outset — I have tried a few other options on this, but trust me, this is the only way to go.
- border-color: — there isn't a big notice on the border color, but it does offer just a hint so it is well worth the overall effect.