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

[teuzero 0]

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?

[gabrielms 0]

@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 0]

9 hours ago, gabrielms said:

@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();
	}
});

 

essa função da parte do código que repeti e outra coisa que é pra quando alguém clicar na lupa.

o que eu to querendo fazer é criar outra função que ao clicar na imagem "barra" apareça o menu e depois quando clicar na imagem "x" a imagem barra volta sem o menu estar presente.Primeiro quero que na resolução 820 pra baixo não apareça o menu, só quero que apareça a imagem barra mesmo, eu vejo muitos sites assim mais não sei como eu faço isso. eu precisaria usar jquery pra fazer um animação com um outro menu que vou montar pra resolução abaixo de 820. :)