com um ID de “fade”, que será a capa preta que escurece o conteúdo quando o ícone do menu é clicado.
Por fim, chamamos o jQuery do Google e nosso próprio arquivo de script, que é onde estaremos trabalhando um pouco. Mas primeiro vamos passar pelos estilos.
Styling com CSS
Portanto, não estaremos passando por todos os estilos CSS (se você quiser, pode inspecionar ou 'ver fonte' na demonstração), pois eles são usados na maioria das vezes para o estilo geral da página, que não é o objetivo deste artigo. Nós estaremos quebrando e olhando alguns pedaços de código que são importantes para o efeito. Então, primeiro de tudo:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Vamos chutar as coisas certificando-nos de que, se o navegador do usuário não tiver JavaScript disponível (esse é o nome da classe no elemento HTML que vimos anteriormente usando o Modernizr), mostraremos o # fallback-nav no cabeçalho e vamos esconder o #fade DIV, bem como o ícone de navegação. Essa é a nossa solução de fallback para que o menu de fallback precise ser estilizado de uma maneira mais tradicional. Também estamos escondendo essa solução se o JavaScript estiver disponível, como você pode ver na última linha.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Então, nesta seção, estamos estilizando nosso ícone de menu no cabeçalho, é muito simples, apenas dando-lhe uma posição relativa e um alto z-index (que será útil mais tarde quando o resto do conteúdo ficar desbotado, ele permanecerá ligado) topo). Também estamos mudando a cor para branco quando ele tem uma classe de "aberto" que vamos adicionar e tirar usando jQuery. Também podemos ver que o div único com um id de "fade" se estende para preencher a tela inteira e preenchido com um preto sólido com uma transparência de 50%. Se o usuário não tiver JavaScript, esse filtro preto ficará oculto, caso contrário, será ocultado com jQuery. Agora vamos olhar para o menu em si:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Então, por último mas não menos importante, o menu principal. Devo acrescentar em primeiro lugar que este é o código simplificado que precisaria de alguns prefixos de fornecedor antes de ser compatível com vários navegadores. Para conseguir isso eu recomendo usar uma ferramenta incrível como Autoprefixer para adicionar todos os prefixos corretos para você.
Assim sendo, vamos ver o que isso implica: em primeiro lugar, tem um posicionamento fixo no topo da página e um negativo de 250 px para a direita. Isso significa que está lá, mas apenas "fora da tela" (como tem uma largura máxima de 250px). A altura também é 100%, de modo que preenche toda a janela de cima para baixo. O menu também precisa de um índice z entre 0 e 9 (acima do filtro preto). Então, aqui é quando a mágica acontece, tem uma exibição: flex; propriedade, bem como outra propriedade vinculada de "flex-direction" (que definimos como "coluna" aqui em vez de "linha" padrão, o que significa que os filhos de item flexíveis - os links no menu - preencherão toda a altura seu pai em partes iguais).
Então, tudo isso foi direcionado para o titular do menu # main-nav, depois, ao nomear os links, atribuímos a eles um valor de flexão igual a 1. Isso faz com que os links preencham a altura inteira igualmente. Então, esses links também recebem um valor de exibição 'flex', o que significa que quaisquer elementos dentro dos links serão afetados por isso. Nós nos certificamos de que a flex-direction ainda é 'column' e então adicionamos uma propriedade de “justify-content: center;” Isso torna o próprio texto dentro dos links centrados verticalmente (é por isso que há divs dentro do ![]()
tags do # main-nav, que não é exatamente semântico, mas é uma maneira muito rápida e fácil de centralizar verticalmente itens.
Agora não podemos ver nada que acabamos de fazer ainda, agora precisamos adicionar nossa funcionalidade com nosso próprio arquivo scripts.js que chamamos anteriormente.
Adicionando a funcionalidade com jQuery
O script para esse efeito é muito pequeno e simples, mas vou colocar tudo aqui primeiro e depois explicar o que está acontecendo:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overflow": "hidden"}); $ ('# main-nav'). Animar ({right: "0"}, 400); $ (this) .removeClass ('fechado') ) .addClass ('open'). html ('x'); $ ('# fade'). fadeIn (); } else if ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"overflow": "scroll"}); $ ('# main-nav'). Animar ({right: "-250px"}, 400); $ (this) .removeClass ('open ') .addClass (' fechado '). html (' ☰ '); $ (' # fade '). fadeOut (); }});});
Então, primeiro de tudo, escondemos o filtro preto. Em seguida, tudo o que fizermos estará contido dentro de uma função anexada a um evento de clique que está vinculado ao link do ícone de menu. Quando isso é clicado, temos dois casos ou situações diferentes; uma é quando o menu já está oculto (como o estado padrão) ou quando o menu está sendo exibido. Então, o link do ícone do menu tem um nome de classe de fechado que nós adicionamos, e nós também estilizamos para abrir. Nossa primeira declaração “se” é que, se o link estiver fechado (portanto, padrão). Se for esse o caso, então o todo
elemento é animado 250px para a esquerda e interrompe a rolagem da página. O # main-nav div também está sendo animado no lugar, estamos alterando o valor correto de -250px para 0. Então, estamos removendo a classe de 'fechado' do link e adicionando um de 'aberto' e também mudando o html do caracter especial de três linhas para um "x". Finalmente, estamos desaparecendo em nosso filtro preto para deixar o restante do conteúdo escuro. E é isso! Isso nos dá o estado aberto do menu.
Agora, a instrução "else if" está segmentando a classe aberta no link do menu. Quando isso acontece, fazemos o inverso de tudo o que fizemos antes, movendo o corpo de volta à posição, além de mover o menu para fora da tela novamente. Removendo a classe de 'open' do ícone do menu, adicionando 'fechado' e alterando o conteúdo de volta para o ícone, bem como apagando o nosso #fade div. Se tudo correr conforme o planejado, a funcionalidade deve ser assim:
Conclusão
Então só temos isso! Essa é uma maneira de fazer esse efeito legal, que estamos vendo cada vez mais com o estilo do webdesign moderno, especialmente em designs para dispositivos móveis. Esse efeito é uma solução simples e agradável que não requer nenhum plug-in e pode ser totalmente personalizada para as necessidades de cada projeto. Também tem sido uma chance de fazer uso do flexbox, bem como algumas outras ferramentas úteis. Deixe-me saber nos comentários se há alguma coisa que você teria feito diferente ou apenas o que você pensou!
Imagem em destaque / miniatura, imagem da porta de correr via Shutterstock.
