Front-end com Vue 3

Aparência

Criando um Menu de Navegação com <nav> e <ul> ​

Navegar em um site de maneira eficiente é crucial para uma boa experiência do usuário. A estruturação adequada de um menu de navegação é fundamental, não apenas para a usabilidade, mas também para a acessibilidade. Nesta seção, exploraremos como criar um menu de navegação utilizando as tags <nav> e <ul> do HTML.

Explicação Teórica ​

  • Tag <nav>: A tag <nav> é usada para definir uma seção de navegação dentro de um site. Ela é importante porque comunica aos navegadores e às tecnologias assistivas que o conteúdo dentro dela é destinado à navegação. Isso ajuda na acessibilidade, permitindo que essas tecnologias ofereçam recursos adicionais para navegar mais facilmente pelo site. A tag <nav> é ideal para agrupar links principais como os de uma barra de menu ou menu lateral.

  • Tag <ul> para Listar Itens do Menu: Dentro da tag <nav>, usamos a tag <ul> (lista não ordenada) para criar uma lista de itens do menu. Isso ajuda a manter o menu organizado e claro, tanto para desenvolvedores quanto para usuários, além de ser uma prática semântica recomendada.

Demonstração Prática ​

Vamos criar um exemplo básico de menu de navegação. O menu consistirá em uma lista de links que levam a diferentes seções de um site fictício.

html
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Sobre</a></li>
    <li><a href="#services">Serviços</a></li>
    <li><a href="#contact">Contato</a></li>
  </ul>
</nav>

Neste exemplo, a tag <li> é usada para listar cada item do menu. Dentro de cada <li>, utilizamos a tag <a> (âncora) para criar os links. O atributo href da tag <a> é usado para especificar o destino do link, que pode ser uma URL externa ou um ID de elemento na mesma página, permitindo a navegação interna.

Atividade Prática ​

  1. Criação de um Menu de Navegação Simples: Utilize o exemplo acima como inspiração para criar um menu de navegação para um site fictício. Pense em um tema para o site (pode ser um hobby, um negócio fictício, um portfólio pessoal, etc.) e determine quais seriam as principais seções desse site.

  2. Personalização com CSS: Se já estiver familiarizado com CSS, desafie-se a estilizar o menu. Algumas ideias incluem alterar a cor de fundo, estilizar os links ao passar o mouse (pseudo-classe :hover), e ajustar o espaçamento entre os itens do menu para torná-lo visualmente atraente.

css
nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  color: #007bff;
}

Esta atividade prática é uma excelente oportunidade para começar a aplicar o que aprendeu sobre estruturação de conteúdo em HTML e dar os primeiros passos na estilização com CSS. Ao concluir, você terá criado um componente essencial para qualquer site, reforçando sua compreensão sobre a importância de uma navegação bem estruturada e acessível.