Ray's Test Pages - Simple Drop Down Menu

It is possible to change certain aspects of a dropdown list box appearance.

The code for the drop down box above is ...

<form>
<p align="center">
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="http://brisray.com/index.html">Home</option>
<option value="http://brisray.com/bristol/bind.htm">Bristol</option>
<option value="http://brisray.com/optill/oind.htm">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm">Royal Navy</option>
</select></p>
</form>

The entire background colour and font can be changed by putting a style into the select statement. If you have the font installed, the text in the dropdown list box should be in Comic Sans MS. This works on Windows with IE v6, Mozilla v1.4, Netscape 7.1 and Opera v7.11

The code for the above dropdown list box is ...

<form><p align="center">
<select style="background-color:#FF0000;font-family: Comic Sans MS;font-size: 16pt"; onChange="location=this.options[this.selectedIndex].value;"">
<option value="http://brisray.com/index.html">Home</option>
<option value="http://brisray.com/bristol/bind.htm">Bristol</option>
<option value="http://brisray.com/optill/oind.htm">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm">Royal Navy</option>
</select></p>
</form>

It is possible to change the colour of each option by using "style" inside the option. This does not work in Opera v7.11

The code for the above dropdown is ...

<form>
<p align="center">
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="http://brisray.com/index.html" style="background-color:#FFFFFF;">Home</option>
<option value="http://brisray.com/bristol/bind.htm" style="background-color:#FFB6C1;">Bristol</option>
<option value="http://brisray.com/optill/oind.htm" style="background-color:#FF69B4;">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm" style="background-color:#FF0000;">Royal Navy</option>
</select></p>
</form>

If you want to user to click on a button to go to the chosen URL use the following code

The code for the above dropdown is ...

<form>
<p align="center">
<select name="menu">
<option value="http://brisray.com/index.html">Home</option>
<option value="http://brisray.com/bristol/bind.htm">Bristol</option>
<option value="http://brisray.com/optill/oind.htm">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm">Royal Navy</option>
</select>
<input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO">
</p>
</form>

Other Ideas

Look into the possibility of making the drop-down mult-column for the 2023 redesign.

Other Websites

Webtek Systems (Internet Archive) - what my site (or anybody else's) must NOT look like

This page created 9th January 2004 and last updated September 24, 2023