|
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!
|
