Ray's Test Pages - Different types of menu

Thi is a very old page written to investigate using tables and buttons for simple menus with no dropdowns. The table menu is not at all accessible friendly and is not responsive, but the button menu works as it should being tabbable and activated using the spacebar or enter key.

Using a table ...

The code to produce this is

<div align="center">
<center>
<table border="3" cellspacing="0" bordercolor="#FF0000" width="80%" background="tile079.jpg" style="border-collapse: collapse" cellpadding="0">
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 1</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 2</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 3</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 4</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 5</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 6</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 7</b></font></td>
</tr>
</table>
</center>
</div>

By calling a piece of JavaScript from the onClick event, you can change all sorts of parameters. In order for this to work properly you need to give each cell an unique ID.

The code to draw the table is ...

<div align="center">
<center>
<table border="3" name="tmenu1" cellspacing="0" bordercolor="#0000FF" width="80%" background="tile079.jpg" style="border-collapse: collapse; color: 0000FF; font-weight: 900"; cellpadding="0">
<td ID="cmenu1" onMouseOver=intmenu("cmenu1") onMouseOut=outtmenu("cmenu1") width="14%" align="center" bordercolor="#0000FF" onClick="location.href='menus1.htm';">
Choice 1</td>
<td ID="cmenu2" onMouseOver=intmenu("cmenu2") onMouseOut=outtmenu("cmenu2") width="14%" align="center" bordercolor="#0000FF" onClick="location.href='menus1.htm';">
Choice 2</td>
<td ID="cmenu3" onMouseOver=intmenu("cmenu3") onMouseOut=outtmenu("cmenu3") width="14%" align="center" bordercolor="#0000FF" onClick="location.href='menus1.htm';">
Choice 3</td>
</tr>
</table>
</center>
</div>

and the JavaScript code functions in the HEAD section of the page are ...

<script language="JavaScript">
function intmenu(cellid){
document.getElementById(cellid).style.cursor="hand";
document.getElementById(cellid).style.color="FFFFFF";
window.status=document.getElementById(cellid).innerHTML;
}
</script>

<script language="JavaScript">
function outtmenu(cellid){
document.getElementById(cellid).style.color="0000FF";
window.status=""
}
</script>

Using buttons ...

The code for the buttons is ...

<form method="POST" name="bmenu">
<p align="center">
<input type="button" value="Choice 1" ID="bmenu1" name="B1" onClick="location.href='menus1.htm'" onMouseOver=inbmenu("bmenu1") onMouseOut=outbmenu("bmenu1") style="background-image:url('tile079.jpg'); font-weight: bold; color: 0000FF";>
<input type="button" value="Choice 2" ID="bmenu2" name="B2" onClick="location.href='menus1.htm'" onMouseOver=inbmenu("bmenu2") onMouseOut=outbmenu("bmenu2") style="background-image:url('tile079.jpg'); font-weight: bold; color: 0000FF";>
<input type="button" value="Choice 3" ID="bmenu3" name="B3" onClick="location.href='menus1.htm'" onMouseOver=inbmenu("bmenu3") onMouseOut=outbmenu("bmenu3") style="background-image:url('tile079.jpg'); font-weight: bold; color: 0000FF";>

and the JavaScript functions in the HEAD part of the page are ...

<script language="JavaScript">
function inbmenu(buttonid){
document.getElementById(buttonid).style.color="FFFFFF";
window.status=document.getElementById(buttonid).value;
}
</script>

<script language="JavaScript">
function outbmenu(buttonid){
document.getElementById(buttonid).style.color="0000FF";
window.status=""
}
</script>

The code has been tested in Internet Explorer 6, Mozilla 1.4, Netscape 7.1 and Opera 7.11 and although they handle tables and the cursor effects differently they basically work the same way.

This page created March 11, 2004 and last updated September 16, 2023