Create Great JavaScript and CSS Menus Simply - A Combo Box
(Page 2 of 4 )
First I'll show you a quick combo box with options that open different web sites. This is one of the simplest applications using the JavaScript hierarchy to point to the items in a combo box. When JavaScript menus first started to appear, combo boxes were the earliest choices. They are quite nifty little ideas and can really aid the layout of the page. They do not occupy a particularly large portion of the page. Also, a JavaScript menu allows for several combo boxes to be placed into something like a table row quite easily or separated using DIV tags. The uses for this pretty standard method of creating a JavaScript menu are endless, really, and still popular.
<script type="text/javascript">
<!--
function jsMenu(combobox){
var URL=document.combobox.selection.options
[document.combobox.selection.selectedIndex].value;
window.location.href=URL;
}
//-->
</script>
Usage of hierarchy to point to data is shown here. A variable called URL will store the web page address being selected in the combo box. The document object points to the form name of combobox. Inside the form, there is the combo box itself containing the various drop-down options. The combo box needed to be named so that the hierarchy works; it is called selection. So we have:
document.combobox.selection.options[....]
Next, the combo box items need to be selected. The combo box named selection points to the option highlighted by the user through options. Then selectedindex is the selected option in the combo box. So:
document.combobox.selection.options
[document.combobox.selection.selectedIndex].value
Now the script just needs to be applied to the form where the combo box has been inserted.
<form name="combobox1">
<select name="selection" size="1" style="background-
color:#663399;font-family:Arial;font-size:12;color:#FFFF00;">
<option value="page4.html">Open Page 4
<option value="page3.html">Open Page 3
<option value="page2.html">Open Page 2
<option value="page1.html">Open Page 1
</select>
<input type="button" value="Visit Site"
onClick="javascript:jsMenu(this)"style=" background-
color:#663399;color:#FFFF00;font-family:Arial;font-size:12;">
</form>
So, a little combo box refresher. The options in the combo box can be edited very easily so go ahead. They show as single page names -- page1, page2, etc. It is very likely to be this way on a web site though URLs can also be inserted into those lines instead to open other web sites. An inline style has been used here twice. The first is used in the select tag line to style the combo box colors and fonts. The second is in the form button line to add a unique style to the button. This is what is great about inline styles as they can edit small parts of a site and override any styles attached to the site. What is achieved here is a quick and easily edited combo box.
Menu systems work well like this on many sites. Take a look at most travel booking sites; there are usually many combo boxes for destinations, departure times and airlines. The list of uses goes on, and they are great ways to add a variety of options for interactivity to any web site.
Next: Rollover Menu Example >>
More Design Usability Articles
More By Stephen Davies
