molendijk

If we want the select box to function as a genuine menu, then a click on a given option (of the select box) must give us the same range of possibilities as does a click on the items of a normal menu. So a click should allow us to go to a new page, to open a popup window, to produce an alert etc.

We can achieve this with the help of a function that has the following general form:

Code:

var which="";
function DoSomethingWithOptionvalue(which) {
var optionValue = document.getElementById(which).options[document.getElementById(which).selectedIndex].value;
var optionValueWithSplit = optionValue.substring(0,[optionValue.indexOf('|')]);
var url = optionValue.substring(optionValue.indexOf('|')+1, optionValue.length);
if (optionValue=="bla") {some function()}
if (optionValueWithSplit=="blo") {some function()}
}

For if (optionValue=="bla") {some function()} and if (optionValueWithSplit=="blo") {some function()} we could have, for instance:

Code:

if (optionValue=="none") {}
else if (optionValue=="alarm") {alert('This is an alert.')}
else if (optionValue=="red background") {document.body.style.background='red'}
else if (optionValueWithSplit=="popup") {window.open(url,'','toolbar=1, location=1, directories=1, status=1, menubar=1, scrollbars=1, resizable=1, width=600px, height=350px, top=50px, left=100px');}
else location.href=url

which could operate on select boxes like the following

Code:

<select size="0" name="select1" id="select1" onchange="DoSomethingWithOptionvalue('select1')" >
<option value="none" selected >Some text</option>
<optgroup label="Normal link" >
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
</optgroup>
<optgroup label="New window / popup" >
<option value="popup|http://www.google.com">Google in new window</option>
</optgroup>
<optgroup label="Change background" >
<option value="red background">Make background red</option>
</optgroup>
<optgroup label="Alert" >
<option value="alarm">Produce an alert</option>
</optgroup>
</select>

It is preferable to use a select box menu having size="0" (or "1", or no size at all, which is the same as size="0"), because we want our menu to be able to appear outside of the control window over other windows and to stay within the visible part of the screen without having to do any specific scripting.

It is also a good idea to anchor a select box (used as a navigation tool) to another element, which shows/hides the box when the mouse moves over the anchor (show) or out of it (hide). This gives us some freedom in positioning the select box on the screen.

Showing a select box having 'display:none' is a simple matter. But hiding it in a proper way is another matter. Its complexity has to do with the fact that different browsers require different ways to hide select boxes. For instance, if, in the select tag, we put onmouseout="this.style.display='none'", then, if we move the mouse out of the select tag, the entire select box hides in non-IE - except Opera - and in IE>6, but in IE6 and in Opera, only the first option (or the one having 'selected') goes away, etc.

Fortunately, these crossbrowser problems can be overcome (added some lines ensuring that the select box 'maintains' its selected option):

Code:

Coding in the head:

//Div needed for showing and hiding select boxes. Background needed for IE6 (and possibly higher versions). We hide the background with opacity
document.write('<div id="hider" style="position:absolute; left:0; width:0%; height:0%; display:inline; z-index:2000; background:white; filter:alpha(opacity=0); opacity:.0" onmousemove="style.height=\'0px\'; style.width=\'0px\'; hideAll()"></div>')

var which="";

/* This hides the selected option in non-Opera when the select box folds out, ensuring that you don't see the selected option twice. You have to give the selected option of each menu: class="dynamicStyle". Doesn't work in IE, and must not apply to Opera, because it would mess up the select box. */
if(!window.opera){
document.write('<style type="text/css">.dynamicStyle{display:none}><\/style>')
}

/* Needed to keep 'selected' intact. */
function selected(){
for (i=0;i<document.getElementsByTagName('select').length; i++) {
document.getElementsByTagName('select').item(i).selectedIndex=0;
}
}
//The onload probably not needed; just a security measure
document.onload=selected;
document.onmouseover=selected;

//Focus needed for IE6
function focusIE6(){
if(/*@cc_on!@*/false){document.body.focus()}
}
document.onmouseover=focusIE6

function hide(tag,className) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == className){
els.item(i).style.display="none";
}
}
}

//This function requires class="selectbox" for each select box
function hideAll()
{
hide('select','selectbox');
}

function showBox(which)
{
document.getElementById(which).selectedIndex=0;
document.getElementById(which).style.display='inline';
}

In the body:

//Anchor-button for first select box
<span onmouseout="hideAll()" >
<button onmouseover="showBox('select1')">Item 1</button>
</span>

<select size="0" name="select1" id="select1" class="selectbox" style="position:absolute;left:2%;margin-top:18px;display:none" onmouseout="document.getElementById('hider').style.height='95%'; document.getElementById('hider').style.width='100%'" onchange="DoSomethingWithOptionvalue('select1'); selectedIndex=0" onmouseover="showBox('select1')" >

<option value="none" selected class="dynamicStyle"> Everything about item 1</option>
...
other options
...
</select>

HERE's a demo, with more details and explanations. In use on this site (where Danny Kaye conducts the New York Philharmonic).
===
Arie Molendijk.