Flexbox: en riktig meny · Koda med Martin

Lär dig ställa rutor sida vid sida, och din meny ser ut som den kommer från en riktig webbplats.

Jag visar: rutor sida vid sida

Länkarna i din meny sitter just nu på sidan en efter en, lite som ord i en mening. En riktig meny har sina punkter snyggt uppställda, sida vid sida, med avstånd. CSS har ett verktyg för att ställa upp rutor som heter flexbox:

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

Det var allt. display: flex säger till rutan: “Ställ upp dina barn (länkarna, här) i en rad.” Och gap sätter avståndet mellan dem. Flexbox kan mycket mer:

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 */
}

Jag visar: en meny som en riktig webbplats har

Låt oss kombinera allt du redan kan med 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);
}

Något nytt till slut: :hover betyder “när du håller musen över det”. Menypunkten lyser upp vid hover – precis som på webbplatser du känner.

Nu är det din tur 💪

Gör din meny till en riktig meny: en färgad remsa över hela headerns bredd, punkter sida vid sida som piller, som lyser upp vid hover. Ta färger från din palett från lektion 6.

🏫 Skolwebbplats – lösning (blå)

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

🙋 Personlig webbplats – lösning (orange)

Samma kod, byt bara headerfärgen:

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

🌍 Resejournal – lösning (grön)

Samma kod, byt bara headerfärgen:

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

⚽ Klubbwebbplats – lösning (klubbfärg)

Samma kod, byt bara headerfärgen till din klubbs:

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

💡

Vill du ha namnet till vänster och menyn till höger, på en rad? Slå in headern i en till flexbox: lägg till header { display: flex; justify-content: space-between; align-items: center; }. Egenskapen space-between betyder “tryck isär barnen: den första till vänster, den sista till höger”.

✅

Kolla själv: Det finns en färgad remsa upptill på din webbplats, med ett vitt namn och pillerformade menypunkter som lyser upp när du håller musen över dem. Kom ihåg – eftersom CSS delas ändrades menyn på varje sida på en gång.

Det här tar du med dig från lektionen

display: flex ställer upp en rutas barn i en rad, gap sätter avstånd mellan dem.
justify-content och align-items justerar saker, flex-wrap: wrap låter dem bryta rad.
:hover = “när musen hålls över det”. En liten glow-up gör en webbplats levande.