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?

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?

• javascript
• jquery

Share Improve this question Follow asked Jan 29, 2013 at 2:51 james emanonjames emanon 11.8k1111 gold badges6969 silver badges107107 bronze badges 1

• Sounds reasonable. Clone the menu, remove the old menu, append the clone. – mrtsherman Commented Jan 29, 2013 at 2:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

http://jsfiddle/5pvGG/

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

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

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