|
Adding a Dropdown Menu To a Web Pageby Linda Johnson, MOS
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">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">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">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">If you go to this page, you can see the simple dropdown menu I
created using the first code: And this one uses the second code:
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:
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! |
|
.
