Publicado em 12 de set.

Como eu posso usar media query com Jquery no meu site?

Meu site é:https://xraros.000webhostapp.com/ To com seguinte problema eu adicionei esse código:

jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(). } }). no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

gabrielms· 13 de set.

@teuzero Bom ele está funcionando!

Bom para esse caso eu recomendo o uso de media no CSS, o que você já utiliza no seu CSS e só configurar ele para o menu.

Vou deixar alguns tutorial que podem te ajudar nessa construção do menu:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

https://www.w3schools.com/howto/howto_js_topnav.asp

https://www.w3schools.com/howto/howto_css_topnav_centered.asp

Uma coisa que eu notei no seu arquivo carrega.js, você repete a mesma função sem a necessidade.

$(document).ready(function(){ // <-- Aqui
	$(".busca").hide();
	$(".lupa").prepend("<img src='../img/lupa.png' class='lupa' /> ");
	$(".lupa img").click(function(){
 if($(this).attr("src") == "img/x.png"){
 $(this).attr("src", "img/lupa.png")
 .siblings().hide();

	} else {
 $(this).attr("src", "img/x.png")
 .siblings().show();

	}
	if($('#menu').is(':visible')){
 $('#menu').hide();
	} else
	{
 $('#menu').show();
	}

	});

	jQuery(document).ready(function() { // <-- Aqui
 if($(window).width()<=820)
 {
 $('#menu').hide();
 }
 });

	Como ele faz a mesma coisa não tem o pq de deixa ele dentro do mesmo.

$(document).ready(function(){
	$(".busca").hide();
	$(".lupa").prepend("<img src='../img/lupa.png' class='lupa' /> ");

	$(".lupa img").click(function(){
 if ($(this).attr("src") == "img/x.png")
 {
 $(this).attr("src", "img/lupa.png")
 .siblings().hide();
 }
 else
 {
 $(this).attr("src", "img/x.png")
 .siblings().show();

 }

 if ($('#menu').is(':visible'))
 {
 $('#menu').hide();
 }
 else
 {
 $('#menu').show();
 }
	});

	if($(window).width() <= 820)
	{
 $('#menu').hide();
	}
});

teuzero· 13 de set.

9 hours ago, gabrielms said: