How to Make Drop Down Menus on a Website

by Jeff Loquist

When creating a website it is very easy to clutter a web page with information. One of the easiest ways to remove the clutter and give your website a clean look is by adding a functioning drop-down menu. Along with helping to tidy up your website, a drop-down menu can also make navigation of the site easier for your visitors by making multiple links easy to find. Setting up a drop-down menu on a website requires only a simple HTML code addition to your web page.

Place your drop-down menu in a form on your website page. Similar to paper forms, a web form is a place where users can enter data with check boxes, radio buttons and text boxes, as well as create a drop-down menu. To begin the form, start with the following code: <form name="drop-down menu"> </form> The form name can be anything you want (we chose drop-down menu here) and is used to label your form for later use.

Add the select function to your web form. The select function is used to create a select list (or drop-down list) where the individual values will be held. A select list will pull the selected value into the drop-down menu box and make the value active for selection. The code to create a select function looks like this: <form name="drop-down menu"> <select> </select> </form>

Add option values to your select function in your drop-down menu. The individual selections in a drop-down menu are known as options. The value function is the URL (or web address) that the option is connected to. You can add as many options to your drop-down menu as needed and this is how the drop-down menu can help to clear clutter from your web page. To add option values, add this code to your select function: <form name="drop-down menu"> <select> <option value="URL">Text in menu</option> <option value="URL">Text in menu</option> <option value="URL">Text in menu</option> <option value="URL">Text in menu</option> </select> </form>

Create a select button to activate your drop-down menu and allow users to select the option they choose. The select button should be either to the left or right of your drop-down menu and close enough that users know that it is related to the menu. You can have your button say anything you wish to grab the user's attention. For our drop-down menu we will simply use "Select." To add a Select button to your drop-down menu, add the following line of code: <form name="drop-down menu"> <select> <option value="URL">Text in menu</option> <option value="URL">Text in menu</option> <option value="URL">Text in menu</option> <option value="URL">Text in menu</option> </select> <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Select"> </form>

Place your drop-down menu on your website. The drop-down menu can be added anywhere you choose on your website. Simply place the drop-down menu code into your web page HTML and be sure to check the functionality of the drop-down menu right away.

Tip

  • check Make your drop-down menu more visually appealing by adding CSS (Cascading Style Sheets) code to change the colors and appearance of the form.

Warning

  • close Do not add too many options to your drop-down menu. There is no magic number, but having too many options can make your drop-down menu confusing and could irritate visitors. If you have a lot of options, consider separating them into categories and creating multiple drop-down menus.

Items you will need

About the Author

Jeff L is the owner and lead marketer with Zen Search Marketing. A graduate of SEMPO's search marketing course, Jeff L has more than 10 years experience in the copywriting field and has guest-posted on several blogs, including Search Engine People, Viva la Violette and Booj.