How to Make Drop Down Menus in a Web Page
Drop-down menus can be a convenient way to provide multiple choices for your users without using a lot of screen real estate. You can use drop-down menus within forms or as a navigation tool. Creating drop-down menus in a website is fairly simple with HTML code.
- Difficulty:
- Moderately Easy
Instructions
-
-
1
Enter syntax for a form. The code for drop-down menus is contained within a form. Position your cursor where you want the drop-down menu to begin. Type "<form name="name"></form>" where "name" is the name of the form.
-
2
Enter syntax to begin the drop-down list. Position the cursor between the form opening and closing tags. Type "<select name="drop-down list"></select>" where "drop-down list" is the name of the list.
-
3
Enter syntax for drop-down list items. Position the cursor between the select opening and closing tags. Enter the following code for each item within the drop-down menu: "<option value="action">item</option>" where "action" is what happens when the user selects the item and "item" is what is displayed in the drop-down list.
-
4
Enter syntax for the button. Position your cursor after the select closing tag but before the form closing tag. Enter <input type="button" onClick="location=document.jump.menu.options[document.name.menu.selectedIndex].value;" value="button name"> where "button name" is what is displayed on the button.
-
5
Refer to the following example. Copy and paste the following code into your website. Replace the form name, urls, drop-down list items and button name with your desired information.
<form name="name">
<select name="menu">
<option value="http://lemonheaddesigns.com/home.html">home</option>
<option value="http://lemonheaddesigns.com/about.htm">about</option>
<option value="http://lemonheaddesigns.com/portfolio.htm">portfolio</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.name.menu.selectedIndex].value;" value="Go">
</form>
-
1
