Hoe maak je een eenvoudige horizontale navigatiebalk met Flexbox
Deze tutorial laat zien hoe je een eenvoudige horizontale navigatiebalk kunt maken met Flexbox en een <ul>. De volledige HTML- en CSS-code kun je hieronder vinden.
HTML-structuur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Navigatiebalk</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS-styling
/* Basisopmaak */
body {
margin: 0; /* Verwijder standaard marges */
padding: 0; /* Verwijder standaard padding */
font-family: Arial, sans-serif;
}
/* Navigatiebalk-styling */
.navbar {
display: flex; /* Gebruik Flexbox voor een rij-indeling */
justify-content: center; /* Centreer de items horizontaal langs de hoofdas */
list-style: none; /* Verwijder opsommingstekens (bullets) */
background-color: #333; /* Donkere achtergrondkleur */
gap: 20px; /* Voeg ruimte tussen de links toe */
}
/* Stijl voor de links */
.navbar a {
text-decoration: none; /* Verwijder onderstreep */
color: white; /* Witte tekstkleur */
font-size: 16px; /* Vergroot de tekst */
padding: 10px 15px; /* Voeg ruimte rond de tekst toe */
display: inline-block; /* Zorg dat de hele link klikbaar is */
transition: background-color 0.3s ease; /* Soepel hovereffect */
}
/* Hover-effect */
.navbar a:hover {
background-color: #575757; /* Verander de achtergrondkleur */
border-radius: 5px; /* Maak de randen afgerond voor een visueel aantrekkelijk effect */
}
Resultaat
De navigatie-items worden netjes horizontaal uitgelijnd met ruimte tussen de links dankzij gap. Bij hover verandert de achtergrondkleur van de links en wordt de hele link klikbaar door de styling met display: inline-block;. De afgeronde hoeken maken het visueel aantrekkelijk.
Tip
Experimenteer met de waarden van gap, padding, en de kleuren om de navigatiebalk aan te passen aan je eigen ontwerp. Voeg extra elementen toe zoals logo's of iconen voor meer complexiteit.