Check out this jsbin prototype that includes two menu items which display a sub-menu when clicked:
The sub-menu visibility is controlled using fadeIn() and fadeOut. However, the opacity transitions do not occur. Instead, the sub-menus either instantly appear or disappear after the specified time period without any fading effect.
The code seems pretty straightforward, but I'm puzzled as to why...
(function(){
var activeMenu = null;
var animation = {
duration: 250,
queue: true
};
$(document).click(function(){
if(activeMenu) {
$(activeMenu).removeClass('active-nav-item');
$(activeMenu).find('.nav-group').fadeOut(animation);
activeMenu = null;
}
});
$.fn.simpleMenu = function() {
$(this).children('.nav-item:has(.nav-group)').each(function(i,e) {
$(e).click(function() {
if(activeMenu) {
$(activeMenu).removeClass('active-nav-item');
$(activeMenu).find('.nav-group').fadeOut(animation);
}
if(activeMenu !== e) {
activeMenu = e;
$(activeMenu).addClass('active-nav-item');
$(activeMenu).find('.nav-group').fadeIn(animation);
return false;
}
});
});
};
})();
$('.global-nav').simpleMenu();
$('.meta-nav').simpleMenu();