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