Transition between two menu's and hide/ignore clickability of the secondary menu

Question

I'm having two menu's on top of each other which transition between each other based upon the click of a specific anchor. Let's call them .defaultMenu and .secondMenu, the anchor is .showSecondMenu and to go back you've got to click .hideSecondMenu. Transitioning between them includes opacity animations. Usually I use display: none to ignore the click of 'hidden' menu's, but this time display: none isn't an option.

I already found found a topic that uses pointer-event: none, but that doesn't work with IE9/10. Therefor I'm seeking for an easy way to transition between the two menu's who lie on top of each other, but only the active menus items are clickable.

The whole Idea is that, when the menu transitions from .defaultMenu to .secondMenu (and backwards) the active one fades out, while the new, hidden, one fades in.

As sort of stated, it should be IE9/10 compatible.

Answer 1

Wow, I would almost give myself a -1 for this. There is a very simple way to achieve this, apparantly. .fade().

$('a.showSecondMenu').click(function(event) {
  event.preventDefault();
  $('.defaultMenu').fadeOut();
  $('.secondMenu').fadeIn();
});

And reverse this script to hide the second menu and show the default menu.