Flexbox: skutočné menu

Nauč sa zoradiť boxy vedľa seba a tvoje menu bude vyzerať ako zo skutočnej webovej stránky.

Ukážem ti: boxy vedľa seba

Odkazy v tvojom menu teraz na stránke sedia jeden za druhým, trochu ako slová vo vete. Skutočné menu má položky pekne zoradené vedľa seba s medzerami. CSS má nástroj na zoradenie boxov – flexbox:

nav {
  display: flex;    /* deti tohto boxu sa zoradia vedľa seba */
  gap: 16px;        /* medzera medzi nimi */
}

To je všetko. display: flex povie boxu: „Zoraď svoje deti (tu odkazy) do radu.” A gap nastaví medzeru medzi nimi. Flexbox vie ešte oveľa viac:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* vycentruj deti vodorovne */
  align-items: center;       /* zarovnaj ich aj zvisle do stredu */
  flex-wrap: wrap;           /* ak sa nezmestia, zalom na ďalší riadok */
}

Skombinujme všetko, čo už vieš, s flexboxom:

header {
  background-color: #1d4ed8;   /* farebný pruh hore */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* nadpis bez predvolených medzier */
}

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

nav a {
  color: white;
  text-decoration: none;       /* odstráň podčiarknutie odkazov */
  padding: 8px 14px;
  border-radius: 999px;        /* úplne zaoblené konce = tvar pilulky */
  background-color: rgba(255, 255, 255, 0.15);  /* polopriehľadná biela */
}

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

Niečo nové na konci: :hover znamená „keď na to prejdeš myšou”. Položka menu sa pri prejdení rozsvieti – presne ako na weboch, ktoré poznáš.

Teraz ty 💪

Premeň svoje menu na skutočné menu: farebný pruh cez celú šírku hlavičky, položky vedľa seba ako pilulky, ktoré sa pri prejdení rozsvietia. Farby vezmi zo svojej palety z lekcie 6.

🏫 Webová stránka školy – riešenie (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á webová stránka – riešenie (oranžová)

Rovnaký kód, len vymeň farbu hlavičky:

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

🌍 Cestovný denník – riešenie (zelená)

Rovnaký kód, len vymeň farbu hlavičky:

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

⚽ Webová stránka klubu – riešenie (farba klubu)

Rovnaký kód, len vymeň farbu hlavičky za farbu svojho klubu:

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

💡

Chceš názov vľavo a menu vpravo na jednom riadku? Zabaľ hlavičku do ďalšieho flexboxu: pridaj header { display: flex; justify-content: space-between; align-items: center; }. Vlastnosť space-between znamená „odtlač deti od seba: prvé vľavo, posledné vpravo”.

✅

Skontroluj sa: Hore na webe je farebný pruh s bielym názvom a položkami menu v tvare piluliek, ktoré sa pri prejdení rozsvietia. Pamätaj – keďže CSS je spoločné, menu sa zmenilo na každej stránke naraz.

Čo si z tejto lekcie odnášaš

display: flex zoradí deti boxu do radu, gap medzi nimi dá medzeru.
justify-content a align-items zarovnávajú, flex-wrap: wrap nechá zalomiť.
:hover = „keď na to prejde myš”. Malé rozsvietenie robí web živým.

Ukážem ti: boxy vedľa seba

Ukážem ti: menu ako majú skutočné weby

Teraz ty 💪

Čo si z tejto lekcie odnášaš