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 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:

<header>
  <h1 class="fL">
    <a href="#" title="A TURMA DO CHAVES">A TURMA DO CHAVES</a>
  </h1>

  <nav class="fR">
    <ul class="l2">
      <li>
        <a href="#Chaves" title="Chaves">Chaves</a>
      </li>
      <li>
        <a href="#Chiquinha" title="Chiquinha">Chiquinha</a>
      </li>
      <li>
        <a href="#Seu-Madruga" title="Seu Madruga">Seu Madruga</a>
      </li>
      <li>
        <a href="#Quico" title="Quico">Quico</a>
      </li>
    </ul>
  </nav>
</header>

​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:

header {
  min-height: 60px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid #ccc;
  background: #ECECEC;
  z-index: 2;
}

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:

<header>
  <h1 class="fL">
    <a href="#" title="A TURMA DO CHAVES">A TURMA DO CHAVES</a>
  </h1>
  
  <input type="checkbox" id="control-nav" />
  <label for="control-nav" class="control-nav"></label>
  <label for="control-nav" class="control-nav-close"></label>

  <nav class="fR">
    <ul class="l2">
      ...
    </ul>
  </nav>
</header>

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:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />

e no css:

@media screen and (max-width: 767px)

Quando redimensionar o navegador menor que 768px, a formatação do header vai se comportar de outra maneira e já escondida utilizando transform:

@media screen and (max-width: 767px) {
  header .control-nav {
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
    width: 30px;
    padding: 5px 0;
    border: solid #333;
    border-width: 3px 0;
    z-index: 2;
    cursor: pointer;
  }

  header .control-nav:before {
    content: "";
    display: block;
    height: 3px;
    background: #333;
  }

  header .control-nav-close {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  header nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    border-left: 1px solid #ccc;
    background: #fff;
    overflow-x: auto;
    z-index: 2;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

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:

#control-nav:checked ~ .control-nav-close {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#control-nav:checked ~ nav {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

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