7

Preciso de um código javascript que altere a classe menu para a classe responsivemenu quando a resolução da tela for menor que 750px.

2
  • 11
    Não podes fazer isso com CSS (media query?)
    – Sergio
    Commented 30/11/2015 às 17:15
  • 1
    Acredito ser a melhor opção também. Verifique se você não pode realizar essa operação diretamente no CSS. Aqui tem um exemplo pra você dar uma estudada: goo.gl/LJFKRp Commented 30/11/2015 às 17:26

3 Respostas 3

15

Utilizando JavaScript

Note que estou verificando o tamanho dentro do bloco window.addEventListener('resize', function() {..});, a função será chamada toda vez em que a resolução da tela for alterada.

window.addEventListener('resize', function () {
    //var altura = window.innerHeight;
    var largura = window.innerWidth;

    if (largura < 750) 
        document.getElementsByClassName('menu')[0].className = 'responsivemenu';
});

Utilizando CSS Media Query

A maneira mais simples utilizando Media Query é definir folhas de estilos especificas para cada tipo de dispositivo, para isso basta adicionar a propriedade media para definir para que tipo de dispositivo seu css será usado.
Utilize handheld para dispositivos de mão, celulares e outros dispositivos deste perfil. Normalmente com telas pequenas e banda limitada.

<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld">

Agora a forma que acredito ser mais correta, no seu arquivo de estilos você utilizará condicionais para definir o estilo para cada resolução que desejar.

/* Estilo padrão */
menu {
  color: blue;
}

/* Estilo para resolução menor que 750 pixels */
@media screen and (max-width: 750) {
  menu {
    color: green;
  }
}

Dentro do bloco você irá definir o estilo específico para a resolução.

Fonte: Introdução sobre Media Queries

5
  • 2
    Deveria ter sido essa a escolhida Commented 1/12/2015 às 10:27
  • Essa é a solução correta!
    – RBoschini
    Commented 1/12/2015 às 11:59
  • ótima resposta! Passarei a usar mais o js sem jquery. Commented 1/12/2015 às 17:59
  • ótima resposta, você poderia incluir uma alternativa usando media query, talvez o AP desconheça este recurso e isto poderia beneficiar a ele (assim como a comunidade). Commented 1/12/2015 às 19:56
  • Bah @TobyMosque media query só sei que existe. Vou dar uma lida sobre e qualquer coisa edito a resposta. Commented 2/12/2015 às 10:15
3

Há diversas maneiras de se fazer isto.

Com Jquery, por exemplo, pode ser feito assim:

if ($(window).width() <= 750)
  $('.menu').removeClass('menu').addClass('responsivemenu');
  // ou
  $('.menu').attr('class','responsivemenu');

Há diversas formas para fazer esta operação.

Caso queira se aprofundar nesse método que apresentei, dê uma olhada em: http://goo.gl/F26YSx

2

Amigão, tenta da seguinte form.

if(window.screen.availWidth<750){
  $('.menu').addClass('responsivemenu').removeClass('menu');
}
9
  • Mas preciso que isso seja executado só com resolução menor que 750px por exemplo.
    – Tiago P.C
    Commented 30/11/2015 às 17:12
  • 2
    O if no começo do codigo já garante que o script vai rodar apenas abaixo de 750px. pq me deu ponto negativo? o codigo ta correto
    – RBoschini
    Commented 1/12/2015 às 12:21
  • 1
    Muito obrigado pelo tempo e gentileza, pode deixar! ;)
    – Tiago P.C
    Commented 1/12/2015 às 12:31
  • 1
    Não estou querendo abrir uma discussão conturbada a respeito, mas podemos ver no debate do do link(este do META) que no geral, mesmo que o AP tenha colocado Javascript no titulo, apresentar soluções com jquery ainda poderia ser válido, já que a "solução" esperada também pode ser feita com a tal lib em questão. De qualquer forma, é inegável que a resposta do Pedro seja a escolhida como "melhor resposta", que alem de simples, soluciona muito bem o problema e ainda é em JS purão. Mas convenhamos que é relativa negar a "conveniência" em usar Jquery. O que acham? [vamos ser amigáveis, please,rs] Commented 3/12/2015 às 11:44
  • 1
    stackoverflow brasil é mais mimimi que tecnologia, infelizmente.
    – RBoschini
    Commented 7/01/2016 às 18:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .