1

Fiz um menu que só é off canvas quando a tela é menor que 768px, caso contrario ele aparece por default na pagina Isso funciona perfeitamente. O problema é que se eu ativar o menu e depois der resize no browser o menu vai parar no meio da página, não sei como resolver. O link da hospedagem é esse http://gioseffi.esy.es/Views/ estou usando a pseudo classe :checked do css pra poder ativar e desativar o menu, se tiverem alguma solução melhor, estou aberto a opiniões, grato ;)

Media para o menu ficar fora da tela:

@media screen and (max-width: 768px) {
  .barra {
  left: -300px;
  position: fixed !important;
}

1 Resposta 1

1

Seu menu está quebrando quando redimensiona a tela, porque o seu <input type="checkbox" id="check"> está marcado, sendo assim, o transform: translateX(300px); ainda continua ativado, empurrando o menu ainda mais pra direita quando não deveria...

Sendo assim, para que seu componente funcione bem em uma solução usando CSS3, você deverá aplicar algumas melhorias em sua folha de estilo... Começando pela linha 116 do estilo.css ampliando o alcance da media query que remove o menu lateral de 500 para 768, pois entre esta medida, sua aplicação está ficando sem menu, e transferindo o transform também para dentro dessa media query, sendo assim, o efeito empurrará seu menu APENAS quando ele tiver no estado "mobile"

@media only screen and (max-width: 768px) {
  .container {
    padding-left: 20px !important;
    padding-top: 30px;
  }
  #check:checked ~.barra{
    transform: translateX(300px);
  }
}
3
  • Funcionou, muito obrigado, cara. Eu estive olhando no Can I use, que a pseudoclasse Checked só funciona no IE 11 p cima, me recomenda fazer esse menu com JS? Se sim, tem alguma material para que eu possa me basear? Obrigado, novamente. Commented 30/03/2017 às 12:10
  • Recomendo fortemente uma solução com javascript, levando em consideração q seu projeto possui Bootstrap, ele tb possui Jquery, facilita muito a implementação da solução, você pode procurar por "JQuery mobile navigation" ou tentar implementar a solução usando as funções da própria biblioteca Commented 30/03/2017 às 13:40
  • você teria algum exemplo, ou material para que eu possa testar? Commented 30/03/2017 às 15:07

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 .