Header responsivo somente com css

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

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.

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

Deixe um comentário

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