Go Button Drop Down Menu

A JavaScript drop-down menu is a way to place a lot of links into a compact area. The code example will give you a menu just like the one shown here. The menu here works if you want to try it.

The Code

Here's the code for the above drop down menu, with the editable parts explained below that. You can paste both parts into your page where you want the menu to appear; or paste the first part in the HEAD section and the second part in the page where you want the menu to appear. Works fine either way.

Part 1 - Do Not Edit This Part

Part 2 - Some Editable Parts

Explanatory Notes

Do not edit anything in Part 1 of the code. When you copy and paste be sure to keep the two long lines intact. To copy and past right-click inside the text box and choose Select All from the context menu. With the code highlighted, press "Ctrl + C" on your keyboard to to copy the code. Use "Ctrl + V" to paste it into your page or a text file.

In Part 2, some editing is required, but not all parts of it are safe to edit. Let's break it down so you understand which parts to edit:

<script type="text/javascript"> 
//script from BoogieJack.com
document.write('<form name="boogie"><select name="pickem">');

Do not edit the above code.

document.write('<option value=none>Choose A Page');

In the above line, "Choose A Page" is what shows in the drop down text box when a user enters the page. You can change that, but use no apostrophes in the title unless you preface the apostrophe with a backslash. For example, to use Boogie Jack's in place of Choose A Page, code it as: Boogie Jack\'s . The backslash tells the browser to render the character after the backslash rather than to interpret it as more JavaScript code.

document.write('<option value=none>--------------------');

The above is used as a divider. It can be removed or inserted any where you want a divider in the menu.

document.write('<option value="index.html">Home Page');

This is an internal link (a link within your own site). On my site it would take you to my home page. Change the html file (index.html) to create a link to the named page, and change the title (Home Page) to reflect where the link goes. You can insert as many lines like this in the menu as you want, with different links and titles for as many pages as you want to list in the menu, although it's probably not wise to list more than a million. This is for links on your own site, providing the links are in the same directory as the page the menu is on. If not, you'll have to provide the correct path. The section below shows off site links.

document.write('<option value="http://www.google.com/">Google');

This is how you would link to other sites, using the full URL. If you're messing around with this menu you probably have some experience and the links are likely self-explanatory. If not, shave your head and send me a dollar.

document.write('</select>');
document.write('<input type="button" value="Go" onclick="go()">'); 
document.write('</form>'); 
</script>

Do not edit anything in the above part.

Notes

Do not insert any line breaks into the code, and do not close any that are there.
This menu won't work in browsers that can't parse JavaScript, or in browsers where people have turned JavaScript off. That's about 1% or less of the surfing population. Nuts to 'em!

That's all there is to it, and you thought it would be hard. Silly poodle.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]