Temos um bom começo no design responsivo. O menu nos tamanhos de tela menores se divide em uma grade 2 × 4. Ele se encaixa muito bem na tela, mas entre isso e a marca, ele ocupa muito espaço. Abrimos no simulador iOS e vemos que, em alguns casos, você não consegue ver nenhum conteúdo real.
Damos uma olhada em alguns recursos sobre como lidar com padrões de navegação, como o artigo Padrões de navegação responsivos de Brad Frost e Off Canvas de Jason Weaver. Também veremos uma demonstração legal no MDN chamada Paperfold.
Adicionamos um link adicional para a navegação que, em última análise, chamamos de “Navegação e pesquisa”, que atuará como o botão para revelar a navegação móvel quando tocado. Por meio de pontos de interrupção de consulta de mídia, ocultamos e mostramos esse botão conforme necessário.
A alternância da navegação que lidaremos principalmente com JavaScript. Um pouco arriscado, pois afasta aqueles que estão em telas pequenas com JavaScript desabilitado - mas estou indo em frente. Esse número é tão pequeno (menor do que desktop sem JavaScript, que certamente é menos de 1%) que vou ser um idiota e correr com ele.
Tudo o que realmente fazemos com JavaScript é alternar o nome de uma classe. Isso é o que eu gosto de pensar como desenvolvimento de CSS orientado pelo estado. Todo o controle do que é mostrado, quando e como é feito com CSS. JavaScript apenas define uma classe para declarar o estado atual.
Gastamos muito tempo tentando adicionar o CSS “paperfold”, fazendo-o funcionar corretamente e, em seguida, colocando a pesquisa em uma lacuna que criamos acima do conteúdo principal por meio de algum preenchimento.
Por fim, o tamanho e a posição são ajustados para caber ainda melhor e um pequeno botão Fechar é adicionado. Eu vou e voltarei em minha cabeça com o fornecimento de IU para alternar estados em coisas como essa. Por um lado, agora que o usuário revelou a navegação, por que precisaria fechá-la? Eles já viram isso. Se eles não quiserem usá-lo, basta passar o dedo nele. Por outro lado, acho meio chato quando não consigo alternar estados como esse em outros aplicativos (por algum motivo), então estou inclinado a fornecer um mecanismo para fazer isso.
