WDD 231: Desenvolvimento Frontend para Web I

S01 - Atividade de Aprendizagem: Navegação do Site

Visão Geral

A navegação é uma parte essencial de qualquer site. Ele permite que os usuários naveguem pelo site e descubram conteúdo. Nesta atividade, você aprenderá a criar um menu de navegação responsivo que funciona bem em telas grandes e pequenas.

Preparação

A maioria dos sites usa uma lista não ordenada com itens de lista e âncoras para os links de navegação principal do site. Esta é uma prática comum porque proporciona:

• Clareza Semântica: Os links ficam agrupados como itens relacionados, sem que a ordem deles importe.
• Acessibilidade: Leitores de tela e outras tecnologias assistivas podem interpretar previsivelmente essa estrutura como uma lista de navegação.
• Flexibilidade: A lista não ordenada pode ser estilizada com CSS para exibir os links de várias maneiras, como horizontal ou verticalmente.
• Consistência: Essa estrutura é uma convenção amplamente adotada em ferramentas e frameworks modernos.

Instruções da Atividade

Nesta atividade, você criará um menu de navegação responsivo que funciona bem em telas grandes e pequenas. Você usará HTML, CSS e JavaScript para criar o menu.

HTML

Para começar, criaremos uma tag nav que conterá nossos links de navegação. Dentro da tag nav, criaremos uma lista não ordenada (ul) com itens de lista (li) para cada link. Cada item da lista conterá uma tag âncora (a) com link para a página apropriada.

Aqui está um exemplo de como o HTML do menu de navegação pode ficar:

<nav id="barra-navegacao" class="navegacao">
  <ul>
    <li class="atual"><a href="#">Notícias e Eventos</a></li>
    <li><a href="#">Templos Dedicados</a></li>
    <li><a href="#">Templos Anunciados</a></li>
  </ul>
</nav>

Neste exemplo, observe que a tag nav tem um id. Isso permite que nos conectemos a ela facilmente usando JavaScript. Também há um atributo class que será usado como um seletor CSS. Além disso, um dos itens da lista tem uma classe "atual" atribuída a ele. Você pode escolher o que quiser para os nomes dessa classe. Isso nos permite alterar visualmente este item da lista para que possamos implementar o Wayfinding (orientação do usuário).

Wayfinding consiste em projetar a usabilidade de forma a facilitar a navegação dos usuários em sites ou aplicações. Oferece suporte à navegação intuitiva, mostrando de forma clara onde o usuário se encontra no site. Há dois princípios importantes a ter em mente ao implementar o wayfinding:

• O nome da página e o nome do link de navegação devem ser bem parecidos. (confira o exemplo de "Página Inicial" abaixo)
• O item de menu atual também deve ter uma aparência diferente dos demais itens de menu. (No exemplo abaixo, a cor de fundo do botão da página inicial é mais escura.)

JavaScript

1. Escreva uma linha de código para selecionar o elemento nav, conforme mostrado no exemplo acima.
   Avalie Seu Conhecimento

   const barraNavegacao = document.querySelector('#barra-navegacao');

2. Adicione uma linha de código ao receptor de eventos botaoNavegacao na atividade de aprendizagem anterior para alternar (adicionar ou remover) a classe "exibir" para o elemento nav selecionado na etapa anterior.
   Avalie Seu Conhecimento

   botaoNavegacao.addEventListener('click', () => {
     botaoNavegacao.classList.toggle('exibir'); 
     barraNavegacao.classList.toggle('exibir');  
   });

CSS

1. Adicione uma regra CSS para não exibir (ocultar) o elemento nav por padrão.
   Avalie Seu Conhecimento

   .navegacao {
     display: none;
   }

2. Adicione uma regra CSS para exibir o elemento nav quando ele tiver a classe "exibir".
   Avalie Seu Conhecimento

   .navegacao.exibir {
     display: block;
   }

3. Neste ponto, você deve conseguir exibir e ocultar os links de navegação em telas pequenas. À medida que a tela fica maior, precisamos exibir a tag nav mesmo que ela não tenha a classe "exibir" adicionada. Para fazer isso, precisamos adicionar o seguinte ao arquivo maior.css.

   .navegacao {
       display: block;
     }

4. Escreva uma declaração CSS moderna para que os itens de lista li da lista não ordenada ul sejam exibidos horizontalmente.
   Avalie Seu Conhecimento

   .navegacao ul {display: flex;}

   Exemplo de código para um menu de navegação usando CSS Flexbox: Menu com CSS Flexbox

Demonstrações em Vídeo

Acompanhe os tutoriais em vídeo a seguir para ver um exemplo de como criar o menu de navegação passo a passo. O vídeo é dividido em duas partes: um para telas pequenas e outro para telas grandes.

Assista ao vídeo WDD231 Navegação do Site 1: Crie a navegação para tela pequena

Assista ao vídeo WDD231 Navegação do Site 2: Crie a navegação para tela maior