If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

molendijk

Using the Select Box as a Navigation Tool

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:

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):