3

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();

    });

});
8
  • O problema todo está na parte que você meche com o li e esquece que ele está cercado por links <a href> 18/03/2014 às 16:19
  • Sim já me falaram disso, mas tentei com o <a> dentro do li e os links ficavam só no texto, não era que pretendia
    – Miguel
    18/03/2014 às 16:24
  • o <a> não deve estar dentro do <li>, o <a> deve estar cercando o <li> desta forma: <a href="#"> <li> Notícias </li> </a> 18/03/2014 às 16:28
  • @PauloRoberto, essa não é uma construção válida. Markup fora de conformidade com as especificações pode ser renderizado pelo navegador da forma que ele bem entender (e eu já presenciei incompatibilidades entre navegadores exatamente devido a essa construção). Um elemento <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. 18/03/2014 às 17:18
  • Entendi, muito obrigado
    – Miguel
    18/03/2014 às 18:26

1 Resposta 1

0

Veja que seus links estão fora do elemento <li>:

<a href="noticias.php"><li>Notícias</li></a>
<a href="#"><li>Logística</li></a>

Quando você chama:

$("nav ul").append($("li").get().reverse());

Está recuperando os elementos <li> sem os links. Mudando o markup o problema desaparece:

<li><a href="noticias.php">Notícias</a></li>
<li><a href="#">Logística</a></li>

Dito isso, acho que seu JavaScript está ficando complicado demais e fazendo várias manipulações no DOM desnecessárias. Pessoalmente desenvolveria a funcionalidade com dois menus separados e um pouco de media query para esconder ou exibir o menu reduzido.

.menuReduzido {
    display: block;
}
.menu {
    display: none;
}
@media (min-width: 800px) {
    .menuReduzido {
        display: none;
    }
    .menu {
        display: block;
    }
}

Com isso você pode deixar os dois menus (e seus respectivos eventos / animações) estáticos e o CSS irá exibi-los conforme o tamanho da janela. Enquanto esse tipo de construção com display: none; também não é perfeita (o ideal seria ter apenas um único menu "fluído") acredito que ele é o menor de dois males nesse caso em que existem animações envolvidas.

3
  • Sim eu tentei isso mas entrava em conflito com a animação > 800px. Eu tenho os links fora do li pois eu que que o li inteiro seja um link e não só o texto
    – Miguel
    18/03/2014 às 16:23
  • Não entra em conflito se você atrelar as animações à classe .menu ao invés dos elementos físicos / ids. Se você quer manter o link fora do li (sabendo que essa construção não passa na validação W3C - ou seja, seu markup é inválido) você precisa modificar sua lógica para reinserir os links dentro da <ul> ao invés dos elementos <li>. 18/03/2014 às 16:30
  • Outro ponto, você pode fazer o seu link ser um bloco display: block; ocupando todo o espaço do <li>, de maneira que o usuário possa clicar em qualquer lugar do <li>. Dessa maneira você produz markup válido com o link dentro da <li>, e, para todos os efeitos, consegue o efeito desejado. 18/03/2014 às 16:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .