02 July 2009

Drop down link menu, script-free!

[* Almost script-free. The value of the the 'onChange' attribute is actually a one-line script.]
This is just a tidbit, but I found it a real pain to find. So, here it is to save you the trouble. I wanted a drop-down menu in a web page, filled with links, and without using JavaScript. Why no scripts? It just seems to me like it's a simple enough thing that it shouldn't need it. But, all of the sources I found in my initial search either 1) just covered the drop down menu ("select" box) and didn't mention links, or 2) used JavaScript to implement the drop down menu. But, I finally found what I was looking for here. The site even has a little "wizard" where you can choose various settings and then generate the html. And, here is a little demonstration:



The code for which looks like this:

<form name="form1">
<select name="menu" onChange="location=document.form1.menu.options[document.form1.menu.selectedIndex].value;">
<option value=''>Please choose</option>
<option value="http://www.freebsd.org/">FreeBSD</option>
<option value="http://www.pcbsd.org/">PC-BSD</option>
<option value="http://www.python.org/">Python</option>
</select>
</form>

(... For simplicity, though, I left out the "style" part of the select tag above.) The second line above runs off the viewable area, but I'll leave it like that to make copy and paste easier.

Labels: