I'm working on a site that wants it to change the order of the li when the window has < 800px, and implemented the code below. The problem is that it seems to be failing at random and sometimes even when the window is going to go over 800px again, and the menu is no longer clickable. I do not know if it's because it's conflicting with the animation you have when the window > 800px. Any tips? the site is at link for anyone who wants to take a look.
function mouseEnterAnimation(allowAnimation) {
if (allowAnimation) {
$('#upBar, nav ul').stop(true).animate({
"height" : "60px"
}, 200);
$('nav ul li').stop(true).animate({
"padding-top" : "20px",
"padding-bottom" : "20px",
"height" : "60px"
}, 200);
$('#lang').stop(true).animate({
"padding-top" : "23px",
"padding-bottom" : "23px",
"height" : "60px"
}, 200);
$('#logo').stop(true).animate({
"margin-top" : "15px",
"margin-left" : "10px"
}, 200);
}
}
// Animação quando o rato sai de cima
function mouseLeaveAnimation(allowAnimation) {
if (allowAnimation) {
$('#upBar, nav ul').stop(true).animate({
"height": "45px"
}, 200, function() {
$('#upBar, nav ul').removeAttr("style");
});
$('nav ul li').stop(true).animate({
"padding-top" : "13px",
"padding-bottom" : "13px",
"height" : "45px"
}, 200, function() {
$('nav ul li').removeAttr('style');
});
$('#lang').stop(true).animate({
"padding-top" : "16px",
"padding-bottom" : "16px",
"height" : "45px"
}, 200);
$('#logo').stop(true).animate({
"margin-top" : "7px",
"margin-left" : "10px"
}, 200, function () {
$('#logo').removeAttr('style');
});
}
}
$(document).ready(function () {
var $topNav = $('#upBar, nav'),
allowAnimation = ($(window).width() >= 800);
$topNav.hover(
function(){
mouseEnterAnimation(allowAnimation);
},
function() {
mouseLeaveAnimation(allowAnimation);
}
);
if (!allowAnimation) {
$("nav ul").append($("li").get().reverse());
}
else {
}
$(window).resize(function() {
allowAnimation = ($(window).width() >= 800);
if (allowAnimation) {
$('nav ul').show();
}
else {
$('nav ul').hide();
$("nav ul").append($("li").get().reverse());
}
});
$("#btnMobile, #menu").on("click", function(){
$("nav ul").stop(true).slideToggle();
});
});