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
.
-
11Não podes fazer isso com CSS (media query?)– SergioCommented 30/11/2015 às 17:15
-
1Acredito 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– thelimarenanCommented 30/11/2015 às 17:26
3 Respostas
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.
-
2
-
-
-
ó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
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
Amigão, tenta da seguinte form.
if(window.screen.availWidth<750){
$('.menu').addClass('responsivemenu').removeClass('menu');
}
-
Mas preciso que isso seja executado só com resolução menor que 750px por exemplo. Commented 30/11/2015 às 17:12
-
2O 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 Commented 1/12/2015 às 12:21
-
1
-
1Nã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
-
1stackoverflow brasil é mais mimimi que tecnologia, infelizmente. Commented 7/01/2016 às 18:52