How to Create a Drop Down Menu
On a website with many different pages and collections of links, it is helpful to organize these additions by using a drop-down menu to slim down the site and improve its efficiency. Creating a drop-down menu involves only a few simple lines of code, but it can make all the difference in the layout of your site.
You want to start your code with a <form name=”generic drop-down menu”> tag, changing what’s inside the quotation marks to whatever you want. This will define the form name for your reference later on. The <‘select> and <‘/select>tag defines the list as a list of options where one specific option must be selected to continue.
Your code so far should look like this:
<form name=”drop-down menu”>
The next step is to add in the various options for links that you are going to have on your site. The basic form of that is as follows:
<option value=”URL”>Listed Item</option>
Obviously you want to change the URL portion, and then decide what sort of hyperlink or abbreviated form to write in the “Listed Item” spot. This is what will be displayed on the list on your site, so for example, to make the list I have below, I would edited this spot to contan the word “Cats.” You can then copy and paste this to include more options in your list to account for however many list items you have.
After this, simply close your tags and your drop down menu will be created. Without any style elements added, the select drop down menu will look like this:
We are still not done, however, as we need a ‘confirm’ button to select whatever link is in the menu. To add this, the code is:
<input type=”button” onClick=”location=document.jump.menu.options[document.jump.menu.selectedIndex].value;” value=”Select”>
After adding this button in, your menu will look like this:
You can spice this up with CSS elements or in-line editing if you’re savvy enough. Enjoy the menu!