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.
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