Create a Pull-Down List/Drop-down Menu

How to turn a pull-down or drop-down list into a drop-down menu (without and easier than using Dreamweaver)

Pulldown menu

I have another short and pretty popular post about how to Create a Drop-down Menu with Dreamweaver. The drop-down menu discussed in that post is different from the pull-down menu mentioned here although most of the times people use the terms “drop-down” and “pull-down” interchangeably. The menu we are talking about here is done by using the <select> and <option> tags and looks like the thumbnail on the left.

This is not done in Dreamweaver; however, if you read on, you’ll see there’s no need for using Dreamweaver for this. Basically, you only need to copy/paste the code (below) to your web file, change some URLs and finish.

This dropdown has been very popular as it’s a simple but great way to save space. We can squeeze a long list of navigational items into one line. Many mobile-compliant websites take advantage of the compact size of this drop-down and use it as the main menu/navigation system.

Drop-down with a submit (go) button

The demo below says for itself. You select an item and press the button to go to the corresponding page. You can copy and paste the code in the box below to your HTML file to use it. You just need to change the details under each <option> tag.

Drop-down without a submit button

If you don’t want the “Go” button, then the javascript is the same, but the HTML part is a little bit different. Instead of using onclick on the button, you now use onchange on the drop-down item (the option item). In the example, I add “2” to all elements, but if you pay close attention, you can tell the javascirpt is not changed at all. Again, copy and paste the code below to your web page, and it’ll work fine.

There you go. Hope this helps!

Related Posts:

One Response to Create a Pull-Down List/Drop-down Menu

Leave a Reply

Your email address will not be published. Required fields are marked *