4

Eu estava procurando uns templates de menus/layouts e encontrei esse muito legal, mas quando eu passei o google para a visão de celular quando eu clicava no menu a 1a bolinha vinha e voltava, em vez de vir todas elas e ficarem ali até eu clicar no botão novamente.

Quero saber como posso fazer para esse menu funcionar corretamente em qualquer resolução de tela e em qualquer dispositivo. Creio que seja algo nesse mousedown no .JS, mas eu ainda sou newbie em JS/JQuery....

Compilador online do próprio template: CODEPEN

2 Respostas 2

4

Nesse teu código ambos os eventos são disparados e o código anula-se. Podes detectar se é mobile e adicionar o evento certo, evitando misturar APIs:

var ev = 'ontouchstart' in window ? 'touchstart' : 'mousedown';
$('.parent2').on(ev, function() {

codepen: http://codepen.io/anon/pen/mJewqj

1
  • 1
    Funcionou e com 1 linha de código a mais, perfeito. Eu só mudei o mousedown por click por desencargo de consciência. Commented 5/05/2015 às 20:26
1

O menu está funcionando, mas no celular o evento é ativado diversas vezes, dando a impressão de que o menu está travado. Isso fica mais evidente mudamos a cor do botão toda vez que o evento e ativado: http://codepen.io/anon/pen/oXjwWe

Para resolver isso, você pode fazer como nessa pergunta, usando um timer para limitar o tempo em que o evento é ativado:

$(document).ready(function() {
  var active1 = false;
  var active2 = false;
  var active3 = false;
  var active4 = false;
    var flag = false;

    $('.parent2').on('touchstart click', function() {
        if (!flag) {
            flag = true;
            setTimeout(function(){ flag = false; }, 100);
            if (!active1) $(this).find('.test1').css({'background-color': 'gray', 'transform': 'translate(0px,125px)'});
            else $(this).find('.test1').css({'background-color': 'dimGray', 'transform': 'none'}); 
             if (!active2) $(this).find('.test2').css({'background-color': 'gray', 'transform': 'translate(60px,105px)'});
            else $(this).find('.test2').css({'background-color': 'darkGray', 'transform': 'none'});
              if (!active3) $(this).find('.test3').css({'background-color': 'gray', 'transform': 'translate(105px,60px)'});
            else $(this).find('.test3').css({'background-color': 'silver', 'transform': 'none'});
              if (!active4) $(this).find('.test4').css({'background-color': 'gray', 'transform': 'translate(125px,0px)'});
            else $(this).find('.test4').css({'background-color': 'silver', 'transform': 'none'});
            active1 = !active1;
            active2 = !active2;
            active3 = !active3;
            active4 = !active4;
        }
    });
});

Note que mudei as condições de eventos do on para touchstart click. Eu testei em meu celular e a função click também funcionou sem problemas. Demo: http://codepen.io/anon/pen/jPbwwg

Eu recomendo você deixar o tempo do setTimeout entre 500ms e 1000ms, assim dá tempo do menu começar a abrir e vê-lo funcionando, antes dele fechar repentinamente.

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 .