Eu estou a trabalhar num site que quero que ele altere a ordem do li quando a janela tiver < 800px, e implementei o código em baixo. O problema é que parece que está a falhar ao acaso e às vezes mesmo quando a janela está a vai outra vez para mais de 800px, e o menu deixa de ser clicável. Não sei se é por estar a entrar em conflito com a animação que tem quando a window > 800px. Alguma dica? o site está em http://www.iwanttobesanta.com/news.php para quem quiser dar uma olhada.
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();
});
});
li
e esquece que ele está cercado por links<a href>
<a>
não deve estar dentro do<li>
, o<a>
deve estar cercando o<li>
desta forma:<a href="#"> <li> Notícias </li> </a>
<ul>
deve apenas conter elementos<li>
. Elementos<li>
por outro lado podem conter links (que podem ser expandidos para ocupar todo o espaço da<li>
conforme meus comentários na resposta.