Menu Mobile Com Jquery Bug

(Daniel Vieira) #1

Olá Galera tudo bem com vocês? Seguinte me deparei com um bug que não estou conseguindo resolver. O que acontece é: o meu menu está responsivo quando ele chega em uma determinada resolução aparece o menu Mobile ai eu clico nele ele exibe tudo certinho sem problemas aparentemente o problema é quando fecho o Menu Mobile pois ao clicar e abrir ele, se eu redimensionar ainda funciona mas ao fechar o menu mobile ja era. O Problema é quando eu redimensiono a tela voltando para o menu normal ele some completamente e só volta se eu der um refresh na página.

Segue o Código em Jquery:
$(function(){
$('.mobmenu').click(function(){
$('.main_header ul').slideToggle();
return false;
});
});

Menu Mobile Funcionando Imagem
Menu Normal Sumindo

(Rômulo Bastos) #2

Como está sua estrutura html/css?
Pelo visto o .slideToggle() está escondendo a sua <ul> e consequentemente o menu mobile some junto com o menu normal. O que você deve fazer, na minha opinião (mesmo sem ver sua estrutura HTML) é:

Usar uma classe CSS p/ exibir o menu mobile. Seria algo desse tipo:

javascript

$(function(){
	$('.mobmenu').click(function(){
		$('.main_header ul').toggleClass('show-mm'); //show mobile menu
		return false;
	});
});

css

.main_header ul,
.main_header ul.show-mm {
	display: block;
}

@sua-media-query... {
	.main_header ul {
		display: none;
	}
	.main_header ul.show-mm {
		display: block;
	}
}

Espero ter ajudado.
Abraço! :v:

(Daniel Vieira) #3

Vlw @romulobastos Estou de Saída agora mas vou Testar quando chegar e posto aqui o Resultado abraço

EDIT: Funcionou @romulobastos agora estou com outra dúvida hahah quando dou refresh na página o menu mobile fica aberto e só fecha quando eu clico nele e tentei colocar um transition mas não funciona para animação hehehe Vlw pela ajuda