Linda's Computer Stop Home Page

Adding a Dropdown Menu To a Web Page

by Linda Johnson, MOS 

reprinted with permission from TechTrax     

TechTrax Seal

If your homepage is like mine, you may find that you have so many links there that the page is becoming way too big and cluttered.  An easy way to fix this is to use a dropdown menu so you can include many links without taking up half the page to include the list.  A dropdown menu lets you include as many links as you want and only uses up a small percentage of the screen “real estate”.

The HTML code to do this is quite simple and can be inserted anywhere on the page, between the <BODY> and </BODY> tags. 

The code basically looks like this:

<form name="jump">
<p align="center">
<select name="menu">
<option value="URL">Text that will appear in the choices</option>
<option value="URL">Text that will appear in the choices</option>
<option value="URL">Text that will appear in the choices</option>
<option value="URL">Text that will appear in the choices</option>
<option value="URL">Text that will appear in the choices</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>

The sample above would give you five choices in the dropdown list (but you can add as many as you like) and a button to click that says “GO” so the user can make their choice and click on the button to go to that page. The button can say anything you like, simply change the word “GO”, where it says value=”GO” in the line that designates the input type to whatever you want. Also, if you don’t want the dropdown centered on the page, change the <p align="center"> to <p align="left"> or <p align="right">.

You can include pages within your website or pages outside of your website.  I made a simple one which includes links to pages in my site (personal-computer-tutor.com) and also links to Mousetrax, Microsoft, and Yahoo. The code looks like this:

<form name="jump">
<p align="center">
<select name="menu">
<option value="http://mousetrax.com">Mousetrax</option>
<option value="http://yahoo.com">Yahoo</option>
<option value="http://microsoft.com">Microsoft</option>
<option value="http://personal-computer-tutor.com">Linda's Computer Stop</option>
<option value="http://personal-computer-tutor.com/abc">ABC Newsletter</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>

The choices in the list will show in the order you have them listed in the code and the top choice in the list is what will show in the box before they use the dropdown to select one.  So, if you don’t want to have any of the choices show by default, you can add the text “Choose One” and set that as your selected option by adding this as the first option in your list:

<option selected>Choose One</option>

This way, if they click the GO button while “Choose One” is still displayed in the list, they will simply stay at the page they are on, because the “option selected” tag includes no URL.

The complete code now looks like this:

<form name="jump">
<p align="center">
<select name="menu">
<option selected>Choose One</option>
<option value="http://mousetrax.com">Mousetrax</option>
<option value="http://yahoo.com">Yahoo</option>
<option value="http://microsoft.com">Microsoft</option>
<option value="http://personal-computer-tutor.com">Linda's Computer Stop</option>
<option value="http://personal-computer-tutor.com/abc">ABC Newsletter</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>

Note! The form name I have chosen is “jump” and the select name is “menu”.  You can use any names you want, but be sure they are the same in the input type line.  Also, if you want to put more than one dropdown menu on a page, they must have different form names or they will not work correctly.

Here’s the same code, where I changed the form name to “hop” and the menu name to “choose”. I also changed the button text to “Take me there!”:

<form name="hop">
<p align="center">
<select name="choose">
<option selected>Choose One</option>
<option value="http://mousetrax.com">Mousetrax</option>
<option value="http://yahoo.com">Yahoo</option>
<option value="http://microsoft.com">Microsoft</option>
<option value="http://personal-computer-tutor.com">Linda's Computer Stop</option>
<option value="http://personal-computer-tutor.com/abc">ABC Newsletter</option>
</select>
<input type="button" onClick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Take me there!"></p>
</form>

If you go to this page, you can see the simple dropdown menu I created using the first code:
http://personal-computer-tutor.com/dropdown.htm

And this one uses the second code:
http://personal-computer-tutor.com/dropdown2.htm

Also, if you prefer not to have to write your own code, there are lots of free dropdown code generators on the net that will do the job for you.  Here’s one that works well:
http://www.htmlbasix.com/dropmenu.shtml

If you are a newbie to HTML, I assure you this will work.  I am not proficient in HTML either.  I’m a FrontPage user, so if I can do this, so can you.

Happy Coding!

Search  

SITE MAP

HOME

ADVERTISE

About
Linda
See my résumé

Read my blog :-)

Contact
Linda

Support

Articles written
by Linda

Testimonials

Free
MS Office
Tips &
Tutorials
choose one

FREE Tips & Tutorials

WINDOWS

IE/OE

HARDWARE

REGISTRY

DOWNLOADS
SIDE by SIDE
Fun LINKS

 

Join
Linda's
Free
MS Office
Group
Join and help others as well as yourself

 

Color Palette
Cool Clock
Dropdown List
FP Forms
Link Hooks
Navigation
OfficeTo FP
ResizePics
Swish To FP
FP Shortcuts
Resources

Privacy Policy, Disclaimer, and Legal Stuff    

This site was last updated on Friday, June 14, 2013 . copyright © 2000 - 2013, Linda F. Johnson, Linda's Computer Stop. All rights reserved.