A cada novo projeto queremos alcançar o máximo de usuários, não importa se o dispositivo seja grande ou pequeno, tem que funcionar.
Com uma abordagem simples e rápida, esse tutorial vai te fazer pensar antes de querer usar o bootstrap só para ter o menu responsivo, claro que ele tem suas vantagens mas procuro sempre desenvolver do zero.
Estarei criando uma serie de tutoriais abordando o assunto e espero que gostem do meu primeiro artigo.
Valendo!!!
Hoje em dia quando o cliente diz que o site é responsivo, quem aqui pensa no bootstrap?
“Fazer menu responsivo é só com bootstrap” ou “vamos precisar de javascript.”
Nada contra o bootstrap, mas prefiro o Locawebstyle que está lindo e o javascript é maravilhoso.
O HTML
Vamos criar primeiro nosso html com header simples:
Agora com o nosso html pronto, vamos fazer o primeiro teste olhando nosso html puro e formatar usando poucas linhas de css.
Ver demo sem style.
O CSS
Como nosso header ficará sempre fixo no topo, vamos formatar da seguinte maneira:
Agora com o header formatado, o segundo teste é redimensionar o navegador para perceber que o header sempre acompanha e ao diminuir muito tem quebra por falta de espaço.
Ver demo com style.
Montamos um header simples e funcional, com mais 3 elementos e CSS teremos um header simples e responsivo.
Esses elementos são dois label’s e um checkbox, com o selector ‘~’ do css3 vamos transformar o header.
Começando o responsivo
Vamos adicionar os elementos antes da nav e o html fica assim:
Nesse ponto o checkbox tem o papel de substituir o javascript.
Conseguimos também por css saber se o elemento está marcado com o famoso “:checked” que todos já usaram com jQuery.
Seu projeto, suas medidas
Para nosso exemplo adicionei no head:
e no css:
Quando redimensionar o navegador menor que 768px, a formatação do header vai se comportar de outra maneira e já escondida utilizando transform:
Formatei o “label .control-nav” para ser o botão responsivo, o “label .control-nav-close” para ser a cortina bloqueando o fundo e o ‘nav’ para ficar fixo e redimensionável.
Agora o pulo do gato
Utilizando dos seletores do CSS3 que são os ‘:checked’ e ‘~’, conseguimos formatar elementos de acordo com a necessidade, veja a documentação.
Sendo mais claro, com o seletor ‘~’ você consegue selecionar elemento do mesmo pai declarado depois dele.
Ao marcar o input, no css usando o transform vamos exibir suavemente o menu, veja:
Pronto
Agora o menu é responsivo e bem simples com poucos elementos.
Veja como ficou o resultado final.
Veja o código completo no github.
É isso ae pessoal, obrigado