Home | Scripting Techniques
Big Marvin This site publishes web authoring works done by Big Marvin.

Interactive Menus

Using SELECT boxes is the easiest way to create menus. The problem with SELECT boxes is that they are not easily customized. The style, whether 3D or outlined cannot be changed even in using style sheets. There is an alternative to the SELECT box.
Popup menus can be placed in Tables whose rows, when the onmouseover and onmouseout events are triggered, changes in color. The rows themselves can store values like the OPTION tags in a select box. Thus you can create a customized SELECT box that are more interactive.

<style type="text/css">
table.menu { background-color: yellow; width: 200; font-family: tahoma; cursor: nw-resize;
border-width: 2; border-style: outset; border-color: yellow; }
td { font-size: 10pt; }
</style>

<script language=javascript>
var mark=''
var pmark=''

function tb_flash_on(){
if ((event.srcElement.tagName=='TD') && (event.srcElement.rid!=mark)) {
document.all(event.srcElement.rid).style.backgroundColor='#BADAF2'
}
}

function tb_flash_off(){
if ((event.srcElement.tagName=='TD') && (event.srcElement.rid!=mark)) {
document.all(event.srcElement.rid).style.backgroundColor='yellow'
}
}

function tb_select(){
if (mark!='') {
document.all(mark).style.backgroundColor=''
}
if ((event.button==1) && (event.srcElement.tagName=='TD')) {
mark=event.srcElement.rid
if (mark==pmark) {
document.all(mark).style.backgroundColor='' }
else { document.all(mark).style.backgroundColor='#84B2D6' }
pmark=mark
return document.all(event.srcElement.rid).value
} else {
return -1
}
}
</script>

...

<table cellspacing=1 cellpadding=1
class="menu" onmouseover="tb_flash_on()" onmouseout="tb_flash_off()" onmouseup="tb_select()">
<tr id=r1><td rid=r1> Menu Item 1</td></tr>
<tr id=r2><td rid=r2> Menu Item 2</td></tr>
<tr id=r3><td rid=r3> Menu Item 3</td></tr>
<tr id=r4><td rid=r4> Menu Item 4</td></tr>
</table>

example:


Incorporate this table with Showing and Hiding Objects to create popup menus.




Email me at: big_marvin@hotmail.com

1