Introdução
Fala galera, hoje irei ensinar a fazer um menu parecido com o que eu tenho aqui no blog, usando somente seletores avançados, assim como o meu.
A compatibilidade é boa, podemos utilizar essa técnica a partir do IE9, segundo o caniuse, abaixo disso será necessário utilizar JS. =/
Sem mais, bora começar nosso menu.
Como vamos fazer isso?
html
Primeiramente devemos definir nossa estrutura no html, o truque está todo na posição dos elementos que iremos criar.
Prestem atenção nessa estrutura:
...
<!-- O checkbox é o principal item dessa nossa brincadeira
graças ao seletor :checked nós poderemos ver se ele
está ativo ou não -->
<input type="checkbox" id="menu-tgl" />
<!-- Aqui vem o menu que ficará escondido -->
<nav class="menu">
<!-- Nosso outro protagonista, a tag label, será
responsável por ativar ou desativar o nosso checkbox
ativando e desativando a pseudo-classe :checked -->
<label for="menu-tgl" class="menu-btn"></label>
<!-- Conteúdo do nosso menu -->
<ul>
<li><a href="#">Página 1</a></li>
<li><a href="#">Página 2</a></li>
<li><a href="#">Página 3</a></li>
</ul>
</nav>
...
css
No nosso arquivo CSS nós faremos a magica acontecer, usando o :checked e ~, conseguiremos acessar os próximos elementos da árvore DOM e mudar seu estilo baseado no checkbox estar ativo ou inativo.
/* importante resetar os valores default de margin e padding
de todos os elementos, exitem outras propriedades também
que são boas de serem resetadas, indico importarem o arquivo
http://meyerweb.com/eric/tools/css/reset/reset.css antes de todo projeto
como nosso caso é simples, isso não será necessário */
*{margin:0;padding:0;}
/* o nosso checkbox não precisa estar visível para que possamos
acessar sua pseudo-classe :checked, sendo assim nós definimos
o display como none, que vai funcionar como se o nosso elemento
nem estivesse no DOM, não irá ocupar nenhum espaço, ao contrário
do que seria se simplesmente definissemos opacity:0 */
#menu-tgl {
display: none;
}
/* aqui aparece o primeiro uso do nosso seletor ~, esse seletor
é usado quando queremos selecionar os próximos elementos na
árvore, desde que estejam no mesmo nivel, no nosso caso o
input[type=checkbox] está na mesma hierarquia que a nossa nav.menu */
#menu-tgl ~ .menu {
box-sizing: border-box;
position: fixed;
width: 350px;
height: 100%;
background: #101925;
font-family: Verdana;
padding-top: 20px;
padding-left: 40px;
transform: translateX(-100%);
transition: transform 0.7s ease;
}
/* pre-fixos: eu não estou utilizando nenhum pré-fixo nesse arquivo
para não deixar muito longo o nosso post(mais do que ja está) */
/* aqui usamos novamente o seletor ~, se olharem direito
como nosso label.menu-btn está dentro da nossa nav.menu
só conseguimos acessa-la se formos pelo nav.menu que está
na mesma hierarquia que nosso input#menu-tgl */
#menu-tgl ~ .menu .menu-btn {
position: absolute;
box-sizing: border-box;
right: -120px;
width: 100px;
top: 20px;
font-family: Verdana;
cursor: pointer;
background-color: #101925;
color: #fff;
padding: 10px 18px;
border-radius: 5px;
text-align: center;
}
/* Aqui um bônus, para mudar o texto dentro do nosso label
nós utilizaremos o pseudo-elemento ::after, assim
temos algo ainda mais interativo pro usuário,
quando estiver fechado irá aparecer "ABRIR" */
#menu-tgl ~ .menu .menu-btn::after {
content:"ABRIR";
}
/* Aqui vem a magia do aparecimento da barra
quando nosso input#menu-tgl estiver selecionado
a nossa barra irá deslizar suavemente para fora
da lateral esquerda */
#menu-tgl:checked ~ .menu {
transform: translateX(0%);
}
/* e o texto será alterado para "FECHAR" */
#menu-tgl:checked ~ .menu .menu-btn::after {
content:"fechar";
}
Conclusão
Isso aí galera, feito tudo isso o resultado deve ser parecido com esse abaixo, tirando fato de eu ter adicionado um pouco de estilo na nossa lista.
See the Pen Menu toggle sem JS by Matheus Mesquita (@mathmesquita) on CodePen.
Espero que tenham gostado desse post, ficou curtinho mas o importante é pegar o feeling desses seletores/pseudo-classes/elementos para fazer efeitos legais em seus sites sem necessidade de trabalho extra na parte de scripting.
Se voce não entendeu bulhufas sobre o transition e o transform que aplicamos no nosso elemento, terça-feira pode colar aqui no blog que irei fazer um post sobre isso muito legal !(e alterar essa frase aqui para botar o link do post).
Muito obrigado pelo seu tempo lendo, e estou sempre com o f5 no post esperando comentários, sugestões e criticas ! Abraços e até a próxima !
