Nothing beats a good example and I think this example should serve you well.
I've setup a couple of arrays for both keyboard event capturing for the menus on Version 2.9 of my website, see jabcreations.net for a preview. The mouse obviously simply uses CSS though I haven't tested IE6 for drop down support though that's something I'll eventually get around to. Essentially if you tab (key on your keyboard) to the menus and press any key other then tab it will expand the menus for you because of the following event listeners. This works just fine in all browsers including IE and works even when served as application/xhtml+xml without any errors or warnings. Most importantly it does
rely on any third party modules (frameworks) so you won't be stuck checking if it still works if you update the framework you were coding to. I'll subscribe in case you have any questions...the arrays are in an
Code: Select all
<script type="text/javascript">
//<![CDATA[
function accessibility_menus()
{
var a1k =['a1k','b1','ba list'];
var b11k=['b11k','c11','cb'];
var b12k=['b12k','c12','cb'];
var b13k=['b13k','c13','cb'];
var a2k= ['a2k','b2','bb list'];
var b21k=['b21k','c21','cb'];
var a3k= ['a3k','b3','bb list'];
var b31k=['b31k','c31','cb'];
var a4k= ['a4k','b4','ba list'];
var a5k= ['a5k','b5','ba list'];
var b51k=['b51k','c51','cb'];
var a6k= ['a6k','b6','ba list'];
var b61k=['b61k','c61','cb'];
var b62k=['b62k','c62','cb'];
var b63k=['b63k','c63','cb'];
var a7k= ['a7k','b7','ba list'];
var a8k= ['a8k','b8','ba list'];
var a9k= ['a9k','b9','ba list'];
var menus_keypress=new Array(a1k,b11k,b12k,b13k,a2k,b21k,a3k,b31k,a4k,a5k,b51k,a6k,b61k,b62k,b63k,a7k,a8k,a9k);
var c11b= ['c11b','c11','hidden'];
var c12b= ['c12b','c12','hidden'];
var c13b= ['c13b','c13','hidden'];
var a1b = ['a1b','b1','list hidden'];
var a2b = ['a2b','b2','list hidden'];
var c31b= ['c31b','c31','hidden'];
var a3b = ['a3b','b3','list hidden'];
var a4b = ['a4b','b4','list hidden'];
var c51b= ['c51b','c51','hidden'];
var a5b = ['a5b','b5','list hidden'];
var c61b= ['c61b','c61','hidden'];
var c62b= ['c62b','c62','hidden'];
var c63b= ['c63b','c63','hidden'];
var a6b = ['a6b','b6','list hidden'];
var a7b = ['a7b','b7','list hidden'];
var a8b = ['a8b','b8','list hidden'];
var a9b = ['a9b','b9','list hidden'];
var menus_blur=new Array(c11b,c12b,c13b,a1b,a2b,c31b,a3b,a4b,c51b,a5b,c61b,c62b,c63b,a6b,a7b,a8b,a9b);
//onkeypress
for (var i=0; i<menus_keypress.length; i++)
{
var m1 = 'menu';
var m2 = m1 + menus_keypress[i][0];
if (window.addEventListener && document.getElementById(m2))
{
var object = document.getElementById(m2);
object.addEventListener('keypress',accessibility_menus_keyboard,false);
object.event_id = m2;
object.event_id = menus_keypress[i][1];
object.event_class = menus_keypress[i][2];
}
else if (document.getElementById(m2) && event.keyCode != 9)
{
var object = document.getElementById(m2);
object.attachEvent('onkeypress',accessibility_menus_keyboard);
object.event_id = menus_keypress[i][1];
object.event_class = menus_keypress[i][2];
}
}
//onblur
for (var i=0; i<menus_blur.length; i++)
{
var m1 = 'menu';
var m2 = m1 + menus_blur[i][0];
if (window.addEventListener && document.getElementById(m2))
{
var object = document.getElementById(m2);
object.addEventListener('blur',accessibility_menus_keyboard,false);
object.event_id = m2;
object.event_id = menus_blur[i][1];
object.event_class = menus_blur[i][2];
}
else if (document.getElementById(m2))
{
var object = document.getElementById(m2);
object.attachEvent('onblur',accessibility_menus_keyboard);
object.event_id = menus_blur[i][1];
object.event_class = menus_blur[i][2];
}
}
}// End accessibility_menus();
function start()
{
// add all your functions you wish to call here for the onload event.
accessibility_menus();
}
window.onload = start;
//]]>
</script>