Tutorial: Estilizando um Menu Horizontal com CSS

O HTML Inicial

Começaremos com a seguinte estrutura HTML para o nosso menu:

<nav>
		<a href="index.html">Início</a>
		<a href="formacao-academica.html">Formação Acadêmica</a>
		<a href="resumo-profissional.html">Resumo Profissional</a>
		<a href="habilidades-tecnicas.html">Habilidades Técnicas</a>
		<a href="experiencia.html">Experiência Profissional</a>
	</nav>

Sem CSS, este menu aparecerá como uma lista de links um abaixo do outro. Nosso desafio é organizá-los horizontalmente e dar-lhes um estilo.

Passo 1: Reset CSS Básico

Antes de começar a estilizar nosso menu, é uma boa prática aplicar um reset CSS básico. Isso ajuda a remover as margens e preenchimentos padrão que os navegadores aplicam aos elementos, garantindo que nosso estilo seja consistente em diferentes navegadores.

Adicione o seguinte código ao seu arquivo CSS (geralmente style.css):

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Uma fonte básica para começar */
}

nav {
    margin: 0;
    padding: 0;
}

• margin: 0; padding: 0;: Remove as margens e preenchimentos padrão do body e da nav.
• font-family: Arial, sans-serif;: Define uma fonte padrão para o corpo do documento.

Passo 2: Tornando o Menu Horizontal com Flexbox

Para que os itens do menu fiquem lado a lado, usaremos o Flexbox, uma ferramenta poderosa do CSS para organizar elementos em uma dimensão (linha ou coluna).

nav {
    background-color: #333; /* Cor de fundo escura para o menu */
    display: flex; /* Transforma a nav em um container flex */
    justify-content: center; /* Centraliza os itens horizontalmente */
    list-style: none; /* Remove marcadores de lista, se houvesse */
}

• background-color: #333;: Adiciona um fundo escuro para o nosso menu, o que ajuda a destacá-lo.
• display: flex;: Esta é a propriedade chave! Ela transforma o elemento <nav> em um contêiner flexível, fazendo com que seus filhos (<a>) se alinhem em uma linha por padrão.
• justify-content: center;: Centraliza os itens flexíveis (nossos links) dentro do contêiner <nav> ao longo do eixo principal (horizontal, neste caso).
• list-style: none;: Embora não tenhamos uma lista <ul> ou <li> aqui, é uma boa prática para menus em geral.

Passo 3: Estilizando os Links Individuais

Agora que os links estão lado a lado, vamos estilizá-los individualmente para que pareçam botões de menu.

nav a {
    color: white; /* Cor do texto dos links */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    padding: 15px 20px; /* Espaçamento interno para cada link */
    display: block; /* Faz com que o padding e a largura funcionem corretamente */
    transition: background-color 0.3s ease; /* Transição suave para o hover */
}

• color: white;: Define a cor do texto dos links como branco para contrastar com o fundo escuro.
• text-decoration: none;: Remove o sublinhado padrão que os links possuem, o que é comum em menus.
• padding: 15px 20px;: Adiciona um preenchimento interno aos links. Isso cria uma área clicável maior e mais agradável visualmente. O primeiro valor é para cima/baixo, o segundo para esquerda/direita.
• display: block;: Transforma os links em elementos de bloco. Isso é importante para que o padding e a largura (se definida) funcionem corretamente em toda a área do link.
• transition: background-color 0.3s ease;: Prepara o terreno para um efeito de transição suave quando o usuário interagir com o link.

Passo 4: Adicionando um Efeito hover

Para melhorar a experiência do usuário, vamos adicionar um efeito quando o mouse passar sobre os links do menu. Isso indica que o item é interativo.

nav a:hover {
    background-color: #555; /* Cor de fundo mais clara ao passar o mouse */
}

• nav a:hover: Este seletor aplica estilos quando o mouse está sobre um link dentro da nav.
• background-color: #555;: Altera a cor de fundo do link para um tom um pouco mais claro de cinza, dando um feedback visual ao usuário.

Resultado Final (CSS Completo)

Juntando todo o CSS que criamos, teremos o seguinte:

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

nav {
    margin: 0;
    padding: 0;
    background-color: #333;
    display: flex;
    justify-content: center;
    list-style: none;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #555;
}

Com este CSS, seu menu horizontal estará funcional, centralizado e com um visual moderno e limpo. Você pode experimentar com cores, tamanhos de fonte e preenchimentos para personalizar ainda mais!

Espero que tenham gostado da aula! Continuem praticando e explorando o mundo do CSS. Qualquer dúvida, estou à disposição.