Criar um menu de navegação que se adapta automaticamente a qualquer tamanho de tela (de computadores a celulares) é essencial hoje em dia. Esqueça métodos complicados! Com Flexbox, o segredo está em poucas linhas de código bem pensadas.

Neste tutorial, você vai aprender a construir um menu elegante e totalmente responsivo, entendendo a função de cada div e class.

1. O HTML (A Estrutura do Menu)

Nosso menu terá um logo e uma lista de links. Usaremos nav para a semântica e ul/li para os itens.

HTML

<header class="main-header">
  <div class="container">
    <a href="#" class="logo">Geek Codes</a>
    
    <button class="menu-toggle" id="mobile-menu" aria-label="Abrir Menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>

    <nav class="main-nav" id="nav-menu">
      <ul class="nav-list">
        <li><a href="#">Início</a></li>
        <li><a href="#">Tutoriais</a></li>
        <li><a href="#">Fórum</a></li>
        <li><a href="#">Sobre</a></li>
      </ul>
    </nav>
  </div>
</header>

Explicação da Estrutura:

• <header class="main-header">: Contém todo o nosso cabeçalho. É o “pai” do menu.
• <div class="container">: Usado para limitar a largura do conteúdo e centralizá-lo. Uma boa prática em design responsivo.
• <a href="#" class="logo">: Onde estará o logo do seu site.
• <nav class="main-nav">: O elemento semântico para navegação. Ajuda no SEO e acessibilidade.
• <ul class="nav-list">: Uma lista não ordenada para os itens do menu.
• <li class="nav-item">: Cada item individual do menu.
• <a href="#" class="nav-link">: O link clicável de cada item.

2. O CSS (A Magia do Flexbox e Responsividade)

Aqui é onde o Flexbox brilha, organizando os elementos de forma fluida.

CSS

 /* Estilos Gerais (Reset e Fontes) */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  background-color: #f4f7f6;
  color: #333;
}

/*  LOGO: Estilização do logo */
.logo {
  color: #ecf0f1;
  font-size: 1.8em;
  font-weight: bold;
  text-decoration: none;
  flex-shrink: 0; /* Evita que o logo encolha */
}
  :root {
  --bg-dark: #1e293b;
  --text-white: #ffffff;
  --accent: #38bdf8;
}

/* --- Estilo Desktop --- */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5%;
  background: var(--bg-dark);
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-list a {
  color: var(--text-white);
  text-decoration: none;
  transition: 0.3s;
}

/* Esconde o botão hambúrguer no Desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  background: transparent;
  border: none;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: var(--text-white);
  margin: 4px 0;
  transition: 0.4s;
}

/* --- Estilo Mobile (Telas até 768px) --- */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex; /* Mostra o botão no celular */
  }

  .main-nav {
    display: none; /* ESCONDE o menu por padrão */
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    background: var(--bg-dark);
  }

  /* Classe que o JS vai adicionar para mostrar o menu */
  .main-nav.active {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    text-align: center;
    padding: 20px 0;
  }
}

Explicação das Classes e Propriedades Essenciais:

• display: flex;: A propriedade mágica que transforma o elemento em um contêiner flexível.
• justify-content: space-between;: No .container, ele empurra o .logo para a esquerda e o .main-nav para a direita. Na .nav-list, ele alinha os itens à direita (flex-end).
• align-items: center;: Alinha os itens verticalmente no centro.
• flex-wrap: wrap;: Crucial para responsividade! Permite que os itens quebrem a linha se não houver espaço suficiente.
• flex-grow: 1;: Permite que o main-nav “cresça” para ocupar o espaço disponível.
• @media (max-width: 768px): Uma Media Query que aplica estilos diferentes quando a tela tem 768 pixels de largura ou menos (tamanho de tablets e celulares).
  • flex-direction: column;: Dentro da media query, muda a direção do flex para que os itens fiquem empilhados verticalmente, em vez de lado a lado.

3. O JavaScript (O Gatilho)

Apenas 5 linhas para fazer a mágica de abrir e fechar.

JavaScript

const mobileMenu = document.getElementById('mobile-menu');
const navMenu = document.getElementById('nav-menu');

mobileMenu.addEventListener('click', () => {
  // O 'toggle' adiciona a classe se não tiver, e remove se tiver
  navMenu.classList.toggle('active');
  
  // Opcional: Animação simples no botão (CSS opcional)
  mobileMenu.classList.toggle('is-active');
});

🔍 Por que fizemos assim?

1. .menu-toggle: É um botão com três span que desenham os riscos do hambúrguer. Ele começa com display: none porque no PC não precisamos dele.
2. position: absolute: No mobile, queremos que o menu flutue sobre o conteúdo quando aberto, sem empurrar tudo para baixo de forma feia.
3. classList.toggle('active'): É a forma mais performática de criar interatividade. Em vez de mudar estilos direto no JS, mudamos uma classe e deixamos o CSS processar o visual.