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)

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.

Select a page below Google MSN Yahoo!

<script type="text/javascript"> function openURL(){ // grab index number of the selected option selInd = document.theForm.aaa.selectedIndex; // get value of the selected option goURL = document.theForm.aaa.options[selInd].value; // redirect browser to the grabbed value (here a URL) top.location.href = goURL; } </script> <form name="theForm"> <select name="aaa" size="1"> <option selected value="">Select</option> <option value="https://www.google.com">Google</option> <option value="https://www.msn.com">MSN</option> <option value="https://www.yahoo.com">Yahoo!</option> </select> <input type="button" value=" GO " onclick="openURL()"> </form>

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.

Select a page below Google MSN Yahoo!

<script type="text/javascript"> function openURL2(){ selInd2 = document.theForm2.aaa2.selectedIndex; goURL2 = document.theForm2.aaa2.options[selInd2].value; top.location.href = goURL2; } </script> <form name="theForm2"> <select name="aaa2" size="1" onchange="openURL2();"> <option selected value="">Select a page below</option> <option value="https://www.google.com">Google</option> <option value="https://www.msn.com">MSN</option> <option value="https://www.yahoo.com">Yahoo!</option> </select> </form>

There you go. Hope this helps!

Related Posts:

• Create Interactive World Map with Mouseover Data for Your Website
• Create Image Map / Hotspot in Dreamweaver CS4
• HEX to RGB Color Converter
• RGB to HEX Color Converter
• Website Maintenance Tools