0

Olá, eu estou brincando em CSS, HTML e JS para construir um site aleatório. Em tese o site estava todo certo, mas agora que upei o site e fui abrir no meu celular e a animação da volta dos botões do menu estão meio bugadas. As vezes tu clica nos botões (principalmente no da carta) e eles não retraem de volta, ai é preciso clicar novamente ou então clicar no menu pra forçar os botões a voltar.

Em geral é o botão test4 que mais buga.

Obs.: Estou usando o fonts awesome para os icones.

o meu Site é esse aqui

HTML:

    <div class="parent2 slideDown noselect">
        <a href="#home"><div class="test1"><i class="fa fa-home fa-2x"></i></div></a>
        <a href="#andrey"><div class="test2"><i class="fa fa-user fa-2x"></i></div></a>
        <a href="#mosufe"><div class="test3"><i class="fa fa-gamepad fa-2x"></i></div></a>
        <a href="#contato"><div class="test4"><i class="fa fa-envelope-o fa-2x"></i></div></a>
        <div class="mask2"><i class="fa fa-home fa-3x"></i></div>
    </div>

CSS:

.parent2 {
  top:15px;
  left:15px;
  position:fixed;
  display:block;
  width:100px;
  height:100px;
  background-color:transparent;
  border-radius:50%;
  z-index:20;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.test1 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  z-index:19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    position:absolute;
}
.test2 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  z-index:19;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
}
.test3 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
    top:25%;
  left:25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;  
}
.test4 {
  width:60%;
  height:60%;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  top:25%;
  left:25%;
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;  
}
.test1, .test2, .test3, .test4{
  background-color: #cc4444;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
}
.mask2 {
  top:15px;
  left:15px;
  width:100px;
  height:100px;
  background:#66aadd;
  border-radius:50%;
  position:absolute;
  z-index:21;
  color:white;
  text-align:center;
  line-height:120px;
  cursor:pointer;
  position:fixed;
}

JS:

$(document).ready(function() {
    /*configuração do menu*/
  var active1 = false;
  var active2 = false;
  var active3 = false;
  var active4 = false;

  var evento = 'ontouchstart' in window ? 'touchstart' : 'click';
  $('.parent2').on(evento, function() {
    if (!active1) $(this).find('.test1').css({'transform': 'translate(0px,125px)'});
    else $(this).find('.test1').css({'transform': 'none'}); 
     if (!active2) $(this).find('.test2').css({'transform': 'translate(60px,105px)'});
    else $(this).find('.test2').css({'transform': 'none'});
      if (!active3) $(this).find('.test3').css({'transform': 'translate(105px,60px)'});
    else $(this).find('.test3').css({'transform': 'none'});
      if (!active4) $(this).find('.test4').css({'transform': 'translate(125px,0px)'});
    else $(this).find('.test4').css({'transform': 'none'});
    active1 = !active1;
    active2 = !active2;
    active3 = !active3;
    active4 = !active4;
    });
     /*Configuração da velocidade em que a tela se mexe*/
    $(".slideDown a").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
     });
});

O exemplo do menu eu tirei desse site no CODEPEN

E a versão demo desse menu é essa

o meu Site é esse aqui

Meu menu no codepen

1 Resposta 1

1

Cara, eu troquei o seu

on('mousedown touchstart')

por

on('click')

... e funcionou no meu celular.

9
  • esse é o exemplo do site parceiro, como eu postei ali, o meu está assim var evento = 'ontouchstart' in window ? 'touchstart' : 'click'; $('.parent2').on(evento, function() { Commented 7/05/2015 às 13:52
  • 1
    Sim. Então teste com o click no ON da função. Já tentou isso ? Sem fazer o IF para verificar o onTouchStart. Commented 7/05/2015 às 13:55
  • 1
    Funciona. Eu coloquei onClick e cliquei em todos os ícones, ele abre e fecha sossegadamente. Commented 7/05/2015 às 13:58
  • 1
    Cara, testei no navegador do Chrome. No simulador de celulares... Está funcionando. Dá algum erro no Console ? Commented 7/05/2015 às 14:12
  • 1
    Por se tratar de HTML, CSS e JS poderia ser Cache. Commented 7/05/2015 às 14:15

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 .