Menu
Considering the difficulty surrounding properly stylizing a dropdown box (not to mention having a consistent cross-platform appearance) I’m trying to simulate a dropdown menu using javascript and hidden tables.
With the understanding that older browsers or users with javascript disabled wouldn’t be able to use it, the actual design has been pretty straightforward. Stylizing and javascript functions will be more appropriately handled in the final design — this is just a quick POC.
The dropdown itself is a series of nested tables. The outer table has two rows and one column: the first row features the onClick events in the TD and within the cell body is a span defined so that the value within can be changed by the dropdown. The second row contains the nested table that is positioned absolutely and with the visibilty attribute set to hidden. This table is a multiple row, single column that catches onClick events at the TD element to change the upper cell, then rehides the nested table.
So the code for the dropdown looks something like this:
[code]
<table border=’1′ cellpadding=’0′ cellspacing=’0′ width=’100px’>
<tr>
<td onClick=’document.getElementById(“dropdown1″).style.visibility=”visible”;’>
<span id=’target1′>Test 1</span>
</td>
</tr>
<tr>
<td>
<table border=’1′ id=’dropdown1′ style=’position:absolute;visibility:hidden’>
<tr>
<td onClick=’document.getElementById(“target1″).innerHTML=”Test 1”;document.getElementById(“dropdown1″).style.visibility=”hidden”;’>Test 1
</td>
</tr>
<tr>
<td onClick=’document.getElementById(“target1″).innerHTML=”Test 2”;document.getElementById(“dropdown1″).style.visibility=”hidden”;’>Test 2
</td>
</tr>
<tr>
<td onClick=’document.getElementById(“target1″).innerHTML=”Test 3”;document.getElementById(“dropdown1″).style.visibility=”hidden”;’>Test 3
</td>
</tr>
</table>
</td>
</tr>
</table>
And appears something like this: [ATTACH]12974[/ATTACH]
Now, two of the three important features are implemented: clicking on the top cell creates the dropdown view, and clicking on an element changes the top cell and disappears the rest of the options.
The issue I’m having is cancelling the menu when the user changes changes focus instead of clicking an option. AFAIK, There’s no (reliable) onBlur event for table or block elements. Setting an onClick event for the body or an encapsulating DIV seems to just cancel out the onClick handlers for the table.
Any suggestions as to how to handle this situation?
[upl-file uuid=34c8d0e1-c354-4ed9-94db-6d1fc5b2a418 size=1kB]dropdown1.png