Flexbox: opravdové menu

Naučíš se rovnat krabice vedle sebe a tvoje menu bude vypadat jako z opravdového webu.

Ukaž mi to: krabice vedle sebe

Odkazy v tvém menu teď stojí na stránce tak nějak za sebou jako slova ve větě. Opravdové menu má položky úhledně vedle sebe s mezerami. Na rovnání krabic je v CSS nástroj jménem flexbox:

nav {
  display: flex;    /* děti téhle krabice se srovnají vedle sebe */
  gap: 16px;        /* mezera mezi nimi */
}

To je celé. display: flex řekne krabici: „Své děti (tady odkazy) postav do řady.” A gap určí mezery mezi nimi. Flexbox umí mnohem víc:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* vycentruj děti vodorovně */
  align-items: center;       /* zarovnej je na střed i svisle */
  flex-wrap: wrap;           /* když se nevejdou, zalom na další řádek */
}

Spojíme všechno, co už umíš, s flexboxem:

header {
  background-color: #1d4ed8;   /* barevný pruh nahoře */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* nadpis bez výchozích mezer */
}

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

nav a {
  color: white;
  text-decoration: none;       /* zruš podtržení odkazů */
  padding: 8px 14px;
  border-radius: 999px;        /* úplně kulaté konce = pilulka */
  background-color: rgba(255, 255, 255, 0.15);  /* poloprůhledná bílá */
}

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

Novinka na konci: :hover znamená „když na to najedeš myší”. Položka menu se při najetí rozsvítí – přesně jako na webech, které znáš.

Teď ty 💪

Udělej ze svého menu opravdové menu: barevný pruh hlavičky přes celou šířku, položky vedle sebe jako pilulky, rozsvícení při najetí myší. Barvy vezmi ze své palety z lekce 6.

🏫 Stránky školy – řešení (modrá)

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); }

🙋 Osobní stránky – řešení (oranžová)

Stejný kód, jen vyměň barvu hlavičky:

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

🌍 Cestovatelský deník – řešení (zelená)

Stejný kód, jen vyměň barvu hlavičky:

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

⚽ Web klubu – řešení (klubová barva)

Stejný kód, jen vyměň barvu hlavičky za tu klubovou:

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

💡

Chceš mít název vlevo a menu vpravo na jednom řádku? Obal hlavičku ještě jedním flexboxem: dej header { display: flex; justify-content: space-between; align-items: center; }. Vlastnost space-between znamená „roztáhni děti od sebe: první doleva, poslední doprava”.

✅

Kontrola: Nahoře na webu je barevný pruh, v něm bílý název a menu-pilulky, které se při najetí myší rozsvěcí. Nezapomeň – protože je CSS společné, menu se změnilo na všech stránkách najednou.

Co si z téhle lekce odnést

display: flex postaví děti krabice do řady, gap udělá mezi nimi mezery.
justify-content a align-items zarovnávají, flex-wrap: wrap zalamuje.
:hover = „když na to najede myš”. Malé rozsvícení dělá web živým.

Ukaž mi to: krabice vedle sebe

Ukaž mi to: menu jako z opravdového webu

Teď ty 💪

Co si z téhle lekce odnést