I recently designed a menu featuring an animated icon that, when clicked, opens with two columns. The issue I'm facing is that after clicking on a link in the right column (view JSFiddle), the menu disappears but requires two additional clicks on the icon to function again. Only when clicking on a specific link does this occur.
Although the functionality is almost there, it's frustrating having to toggle the icon multiple times. Any advice or suggestions would be greatly appreciated. Apologies for the messy code!
$("#menuBtn").click(function(){
$("a.menuIcon").toggleClass("selected");
});
var elem = $('#menuBtn');
elem.toggle(function () {
$('#menuContainer').animate({ opacity: '1'}, 'fast');
$('#menuContainer').css({ "z-index": "999999"});
}, function () {
$('#menuContainer').animate({ opacity: '0'}, 'fast');
$('#menuContainer').css({ "z-index": "-1"});
});
$("#menu_right").click(function(){
$("a.menuIcon").toggleClass("selected");
$('#menuContainer').animate({ opacity: '0'}, 'fast');
});
Check out the code on http://jsfiddle.net/QM635/