I am facing an issue where, in mobile window mode, if I click on the burger icon and then zoom out to a larger resolution and zoom back in to mobile size, clicking on the burger icon does not activate the slide-down menu as expected.
You can see the issue in action here: http://jsfiddle.net/3n0zL27x/1/ Any help on this matter would be greatly appreciated!
/// create a list and append to mobilemenu
var $select = $("<ul></ul>");
$("#mobileMenu").append($select);
//// Get each element in the menu li
$( "#menu li" ).each(function(){
//SELECTING ELEMENT RELATED TO THE FUNCTION
var $anchor = $(this);
// SELECTING THE LIST IN FUTURE THE MENU
var $li = $("<li></li>");
// ADDING TEXT FROM EACH ANCHOR TO THE LIST
$li.text($anchor.text());
/// ADDing the list item to the unorderd list
$select.append($li);
});
var isclicked = false;
// USER CLICKING ON THE BURGER AND ACTIVATEING THE MENU
$(".burger").click(function(event){
event.preventDefault();
$(this).toggleClass('active');
/// IF THE BURGER MENU IS CLICKED FADE OUT THE LIST ITEMS AND SCROLL UP THE BACKGROUND
if (isclicked === true) {
$("#menu").animate({
height: "80px",
}, 1500 );
$("#mobileMenu li").fadeOut(1000);
isclicked = false;
}
/// IF THE BURGER MENU IS NOT CLICKED SLIDE DOWN THE BACKGROUND AND FADE IN THE LIST ITEMS
else {
$("#menu").animate({
height: "150px",
}, 1500 );
$("#mobileMenu li").css({
padding: "5px 0px",
color: "white"
});
$("#mobileMenu li").fadeIn(3500 );
isclicked = true;
/// IF USER RESIZES THE PAGE REMOVE THE MENU
$( window ).resize(function() {
$("#mobileMenu li").css({
display: "none",
});
$("#menu").css({
height: "80px",
});
// SET BURGER STATE TO NOT ACTIVATED
$(".burger").removeClass('active');
});
}});