Question

I have a css menu that also does child menus etc.. the problem is, I have to create eventHandlers for for tab/jaws users. It seems when I manipulate the menu(s) with show()/hide() it mucks up the inherent css selectors and their states, so if a user wanted to do both tab and mouse move – it won’t work. They either have to use all mouse or tabbing etc..

I could create more js eventhandlers for mouseovers/outs etc..but curious if it would be feasible to clone the parent elements onload, and tie-into the tabbing that when they tabbed “off” the menu, I “revert” to this saved state so then the user can use the css method of mouseover/out etc..

Does this make sense? Or is this as much work/overhead as just creating more eventHandlers for the mouse events?

Answer 1

Here is an example of saving and restoring a menu just as you suggested.

http://jsfiddle.net/5pvGG/

var $saved = $('#cssmenu').clone();

$('#a').click( function() {
    $('#cssmenu').remove();
});

$('#b').click( function() {
    $('body').prepend($saved);
});