JQuery

JQuery: Exibindo menu conforme resolução do monitor

Mais uma dica de JQuery.

Aprenda como exibir ou ocultar um menu na vertical, conforme a resolução do monitor.

Primeiro, baixe a biblioteca do JQuery e insira uma chamada do arquivo dentro da tags <head> </head>.

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Após, a chamada da biblioteca JQuery, insira o código abaixo:

<script>
$(document).ready(function(){
   var tam = $(window).width();
 
   if (tam >=1024){
     $("#menu-vertical").show();
   }else{
     $("#menu-vertical").hide();
   } 
});
</script>

Explicando: A resolução do tamanho da tela é passado a variável tam e depois verificado se o tamanho é maior ou igual a 1024 (altere conforme a sua necessidade). Se sim, o menu é exibido. Caso contrário, fica em oculto. O menu deve estar dentro do div#menu-vertical.

6 thoughts on “JQuery: Exibindo menu conforme resolução do monitor

  • Gostei da dica!!!
    Estou começando a estudar o jquery
    e acho que dá pra essa lógica até pro tamanho do background! ^^

    Gostando bastante também do site de vocês!
    Ps.: impressionante com as pessoas não param pra comentar né?

    Resposta
  • Israel

    o jQuery é uma ferramenta impressionante. Uma das coisas que eu sofria muito era para que a página se ajustasse a resolução da pessoa, e com essa dica resolvi meu problema.
    Fiz assim:
    $(document).ready(function(){
    var j_width = $(window).width();
    var j_height = $(window).height();

    $(“#container”).css({
    width: j_width+”px”,
    heigth: j_height+”px”
    });
    }

    dessa forma, a minha div container sempre terá as medidas da tela de quem está acessando a página 🙂

    fica a dica aí

    abraço!

    Resposta
  • Tayner

    Muito bom o seu código Israel obrigado.

    Resposta
  • Mesmo passando 6 anos da postagem, continua sendo uma ótima dica, parabéns. Me ajudou a resolver uma situação isolada.
    Abraço!

    Resposta
  • W. Matheus

    Muito obrigado, me ajudou muito!!!

    Resposta

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *