Flexbox: een echt menu

Leer dozen naast elkaar zetten, en je menu ziet eruit alsof het van een echte website komt.

Ik laat je zien: dozen naast elkaar

De links in je menu staan nu achter elkaar op de pagina, een beetje zoals woorden in een zin. Een echt menu heeft zijn items netjes naast elkaar, met ruimte ertussen. CSS heeft een tool om dozen uit te lijnen die flexbox heet:

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

Dat is alles. display: flex zegt tegen de doos: “Zet je kinderen (hier de links) op een rij.” En gap bepaalt de ruimte ertussen. Flexbox kan veel meer:

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

Laten we alles wat je al weet combineren met 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);
}

Iets nieuws aan het eind: :hover betekent “als je er met de muis overheen gaat”. Het menu-item licht op bij hover – precies zoals op websites die je kent.

Jij bent aan de beurt 💪

Maak van je menu een echt menu: een gekleurde balk over de volle breedte van de header, items naast elkaar als pillen, die oplichten bij hover. Pak kleuren uit je palet van les 6.

🏫 Schoolwebsite – oplossing (blauw)

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

🙋 Persoonlijke website – oplossing (oranje)

Dezelfde code, wissel alleen de headerkleur:

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

🌍 Reisdagboek – oplossing (groen)

Dezelfde code, wissel alleen de headerkleur:

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

⚽ Clubwebsite – oplossing (clubkleur)

Dezelfde code, wissel alleen de headerkleur voor die van jouw club:

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

💡

Wil je de naam links en het menu rechts, op één regel? Pak de header in nog een flexbox: voeg header { display: flex; justify-content: space-between; align-items: center; } toe. De eigenschap space-between betekent “duw de kinderen uit elkaar: de eerste naar links, de laatste naar rechts”.

✅

Controleer jezelf: Bovenaan je website zit een gekleurde balk, met een witte naam en menu-items in pilvorm die oplichten als je eroverheen gaat. Onthoud – omdat CSS gedeeld is, is het menu op elke pagina tegelijk veranderd.

Wat je meeneemt

display: flex zet de kinderen van een doos op een rij, gap zet ruimte ertussen.
justify-content en align-items richten dingen uit, flex-wrap: wrap laat ze omvouwen.
:hover = “als de muis eroverheen gaat”. Een klein lichtje maakt een website levendig.

Ik laat je zien: dozen naast elkaar

Ik laat je zien: een menu zoals een echte website

Jij bent aan de beurt 💪

Wat je meeneemt