Menu Mobile

carecazn · 18 de dezembro de 2016

Bom dia, tenho um menu mobile feito com HTML5 e jQuery, ele esta com algum bug, pois quando eu clico nele a primeira vez ele não abre, somente na segunda vez é que funciona.

<ul class="main_nav">
 <li class="main_nav_item"><a title="" href="<?= HOME; ?>/quem-somos">Quem Somos</a></li>
  <li class="main_nav_item"><a title="" href="<?= HOME; ?>/legislacoes">Legislações</a></li>
  <li class="main_nav_item"><a title="" href="<?= HOME; ?>/portifolio">Portifólio</a></li>
  <li class="main_nav_item"><a class="b-n" title="" href="">Serviços</a>
    <ul class="main_nav_item_sub">
        <li class="main_nav_item_sub_item"><a href="<?= HOME; ?>/servicos">servicos 1</a></li>
        <li class="main_nav_item_sub_item"><a href="<?= HOME; ?>/servicos">servicos 2</a></li>
        <li class="main_nav_item_sub_item"><a href="<?= HOME; ?>/servicos">servicos 3</a></li>
    </ul>
  </li>
  <li class="main_nav_item"><a title="" href="#" target="_blank">Consultório</a></li>
  <li class="main_nav_item"><a title="" href="<?= HOME; ?>/contato">Contatos</a></li> 
</ul>

E o jQuery

$(function () {
  $('.mobile_action').click(function () {
      if (!$(this).hasClass('active')) {
        $(this).addClass('active');
        $('.main_nav').animate({'left': '0px'}, 300);
      } else {
        $(this).removeClass('active');
        $('.main_nav').animate({'left': '-100%'}, 300);
      }
  });   
});

Podem me ajudar a ver se tem alguma coisa errada ou se tem alguma coisa que eu consiga fazer para melhorar esse sintoma?

DiF · 18 de dezembro de 2016

@carecazn Não sei se vai funcionar.. mas tenta fazer com a função ON() usando a versão mais recente do jquery 3.1.1

$(document).ready(function(){
	var btn_mobile = $('.mobile_action');
	btn_mobile.on('click', function(e){
	    e.preventDefault();
            var $this = $(this).hasClass('active');
            var main_nav = $('.main_nav'); 

            if(!this){
               $this.addClass('active');
               main_nav.animate({'left': '0px'}, 300); 
            }else{
               $this.removeClass('active');
               main_nav.animate({'left': '-100%'}, 300);
        }    
    }); 
});

carecazn · 19 de dezembro de 2016

9 horas atrás, DiF disse:

@carecazn Não sei se vai funcionar.. mas tenta fazer com a função ON() usando a versão mais recente do jquery 3.1.1


$(document).ready(function(){
	var btn_mobile = $('.mobile_action');
	btn_mobile.on('click', function(e){
	    e.preventDefault();
            var $this = $(this).hasClass('active');
            var main_nav = $('.main_nav'); 

            if(!this){
               $this.addClass('active');
               main_nav.animate({'left': '0px'}, 300); 
            }else{
               $this.removeClass('active');
               main_nav.animate({'left': '-100%'}, 300);
        }    
    }); 
});

Boa noite @DiF, estou usando

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

função não funcionou.

DiF · 19 de dezembro de 2016

@carecazn Agora que eu vi errei uma variável ali:

if(!this){

troca para

if(!$this){

Tinha feito a mudança mas passou desapercebido por mim. vê se agora funciona.

Se não der, tenta usar o Bind()

carecazn · 19 de dezembro de 2016

30 minutos atrás, DiF disse:
@carecazn Agora que eu vi errei uma variável ali:
if(!this){
troca para
if(!$this){
Tinha feito a mudança mas passou desapercebido por mim. vê se agora funciona.

Se não der, tenta usar o Bind()

Ainda não deu certo, no console esta acusando erro na linha

 $this.removeClass('active');

Não sei usar o Bind() ainda, rsrsrs

DiF · 19 de dezembro de 2016

@carecazn Poderias postas o seu CSS? assim eu posso recriar aqui no eclipse e analisar melhor rodando aqui.

carecazn · 19 de dezembro de 2016

2 minutos atrás, DiF disse:

@carecazn Poderias postas o seu CSS? assim eu posso recriar aqui no eclipse e analisar melhor rodando aqui.

Com certeza

@media (max-width: 992px){
	.mobile_action {position:relative;width:46px;height:46px;float:right;cursor:pointer;margin-top:2px;background-color:#F2F2F2;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
	.mobile_action.active {background-color:#0888B4;color:#fff !important;}
	.mobile_action.active i{color:#fff !important;}
	.mobile_action:hover {background-color:#A9D0F5;}
	.main_nav {position:fixed;top:63px;left:-100%;width:76%;height:100%;min-width:200px;max-width:230px;background-color:#222;z-index:99;overflow:hidden;overflow-y:auto;}
	.main_nav_item {float:left;width:100%;position:relative;}
	.main_nav_item > a{float:left;width:100%;padding:10px;text-transform:uppercase;text-decoration:none;color:#eee;font-weight:700;font-size:0.875em;}
	.main_nav_item:hover, .main_nav_item > a:hover{background-color:#444; color:#fff;}
	.mobile_action i {position:absolute;top:4px;left:9px;color:#4B528F;}
	.main_nav_item_sub{float:left;width:100%;padding:10px;background-color:#333;}
	.main_nav_item_sub_item{float:left;width:100%;}
	.main_nav_item_sub_item a{float:left;width:100%;padding:10px;text-transform:uppercase;text-decoration:none;color:#fff;font-size:0.8em;}
	.main_nav_item_sub_item a:hover{background-color:#4B528F;}
}

adicionado 16 minutos depois

Notei outra coisa, no topo do site tem a logo e o menu, e quando eu clico na logo, também aconteceu o mesmo problema, o primeiro toque não foi percebido no celular, eu atualizo a tela e toco uma vez e ele não faz nada, apenas no segundo toque que ele se manifesta, e partir dai funciona sempre, desde que eu não atualize a tela, caso eu atualize preciso repetir o procedimento.

Estranho nuca tinha acontecido isso!