Flexbox: um menu a sério

Vou mostrar-te: caixas lado a lado

As ligações no teu menu estão atualmente na página umas a seguir às outras, meio como palavras numa frase. Um menu a sério tem os itens alinhados lado a lado, com espaçamento. O CSS tem uma ferramenta para alinhar caixas chamada flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

É isso. display: flex diz à caixa: «Alinha os teus filhos (as ligações, aqui) numa fila.» E gap define o espaço entre eles. O flexbox pode fazer muito mais:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

Vamos combinar tudo o que já sabes com flexbox:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

Algo novo no fim: :hover significa «quando passas o rato por cima». O item do menu acende ao passar o rato – exatamente como nos sites que conheces.

Agora és tu 💪

Transforma o teu menu num menu a sério: uma barra colorida na largura total do cabeçalho, itens lado a lado em forma de pílula, que acendem ao passar o rato. Usa cores da tua paleta da lição 6.

🏫 Site da escola – solução (azul)

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

🙋 Site pessoal – solução (laranja)

O mesmo código, só troca a cor do cabeçalho:

header {
  background-color: #ea580c;
  padding: 16px;
}

🌍 Diário de viagens – solução (verde)

O mesmo código, só troca a cor do cabeçalho:

header {
  background-color: #15803d;
  padding: 16px;
}

⚽ Site de clube – solução (cor do clube)

O mesmo código, só troca a cor do cabeçalho pela do teu clube:

header {
  background-color: #b91c1c;
  padding: 16px;
}

💡

Queres o nome à esquerda e o menu à direita, numa linha? Envolve o cabeçalho noutro flexbox: adiciona header { display: flex; justify-content: space-between; align-items: center; }. A propriedade space-between significa «empurra os filhos para os lados: o primeiro à esquerda, o último à direita».

✅

Verifica tu: Há uma barra colorida no topo do teu site, com um nome branco e itens de menu em forma de pílula que acendem quando passas o rato. Lembra-te – como o CSS é partilhado, o menu mudou em todas as páginas de uma vez.

O que ficas a saber desta lição

display: flex alinha os filhos de uma caixa numa fila, gap põe espaço entre eles.
justify-content e align-items alinham coisas, flex-wrap: wrap deixa-as quebrar linha.
:hover = «quando o rato passa por cima». Um pequeno brilho faz um site parecer vivo.

Vou mostrar-te: caixas lado a lado

Vou mostrar-te: um menu como os sites reais têm

Agora és tu 💪

O que ficas a saber desta lição