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=”[].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!

~ by Steve Crnic on March 30, 2014.

One Response to “How to Create a Drop Down Menu”

  1. Hi Steven!

    You started out really strong, making your objective clear and explaining why this is a helpful tutorial. I was with you until you hit “Text in menu” After rereading it a couple of times I understood what you meant, but I think you could have presented this more clearly if instead of writing “Text in menu” you had written “Cats” to reflect your example. Then if you had followed it up with several items from the drop down in a row to show what it should look like if done correctly. Maybe at the end you could have shown what all of the coding looked like if done correctly, sort of how you did with

    except with all of the information for the button/the different drop down included. Over all great job though!

    – Julia

Comments are closed.

%d bloggers like this: