WDD 131: Fundamentos da Web Dinâmica

S02 – Atividade de Aprendizagem: Menus Responsivos

Visão Geral

O objetivo desta atividade é criar um menu responsivo usando JavaScript. O menu se adaptará a diferentes tamanhos de janela de visualização e também responderá quando o usuário clicar em um "botão de hambúrguer" (≡). No design responsivo, nosso objetivo é proporcionar aos usuários uma experiência positiva e familiar.

Preparação

Menus de hambúrguer ou estruturas equivalentes dão suporte ao design responsivo. Eles nos permitem organizar melhor o layout, pois economizam espaço na página. Eles são bem reconhecidos pelos usuários, mesmo que eles não saibam que o símbolo comum é chamado de menu de hambúrguer.

Aqui está um exemplo do Google Maps.

1. Assista a este exemplo de aplicação de um menu responsivo nesta demonstração em vídeo:
   • Demonstração em Vídeo: ▶️ Menu de Hambúrguer Responsivo
   • CodePen ☼ Menu Responsivo

Instruções da Atividade

1. Em sua própria conta CodePen, este CodePen ☼ Menu responsivo – Iniciar
2. CSS: Mova o botão do menu de hambúrguer para o canto superior direito da tela, fornecendo declarações CSS apropriadas onde atualmente há espaços em branco (______).
3. JavaScript: Termine o código JavaScript preenchendo os 3 (três) espaços em branco (______) no ouvinte de evento do botão de menu.
   Este exemplo escuta um evento iniciado pelo usuário e alterna a classe fornecida para o elemento de navegação. O nome da classe já existe no CSS e está pronto para ser aplicado.
4. CSS: Altere o ícone de fechamento do botão de hambúrguer ❎ para algo de sua escolha que seja apropriado.

   O que a sintaxe :: no seletor de regras CSS faz?

   A sintaxe seleciona pseudoelementos (conteúdo em inglés) para o elemento selecionado, o que, neste caso, nos permite adicionar conteúdo ao conteúdo existente no elemento.

5. CSS: Orientação – Adicione uma regra para a classe "active" para que o usuário saiba qual página ele tem aberta no momento, alterando visualmente a aparência de um item de menu.
   Neste exemplo, a classe active está sendo usada na página Sobre Nós.

   <a href="#" title="Sobre Nós" class="active">Sobre Nós</a>

   "Facilitar a navegação das pessoas em um site ou aplicação ajuda todos a encontrar o que precisam de forma rápida e eficaz. A sinalização clara ajuda especialmente pessoas com deficiências visuais, de mobilidade ou cognitivas que, de outra forma, podem achar difícil entender onde estão e como chegar aonde desejam." – Universidade de Harvard – Acessibilidade Digital - (conteúdo em inglés)

6. Não se esqueça de salvar as alterações no seu CodePen.