Hoe te maken: Topnavigatiebalk

Leer hoe je een topnavigatiebalk maakt met CSS.

Maak een topnavigatiebalk

Eerste stap - Voeg HTML toe:

<div class="topnav">
  <a class="active" href="#home">Thuis</a>
  <a href="#news">Nieuws</a>
  <a href="#contact">Contact</a>
  <a href="#about">Over</a>
</div>

Tweede stap - Voeg CSS toe:

/* Voeg een zwarte achtergrondkleur toe aan de topnavigatie */
.topnav {
  achtergrondkleur: #333;
  overschrijving: verborgen;
}
/* Stel de stijl van de links in de navigatiebalk in */
.topnav a {
  zwevend: links;
  kleur: #f2f2f2;
  tekstuitlijning: center;
  uitvulling: 14px 16px;
  tekstdecoratie: none;
  font-grootte: 17px;
}
/* Verander de kleur van de link bij mouseover */
.topnav a:hover {
  achtergrondkleur: #ddd;
  kleur: zwart;
}
/* Voeg de kleur toe aan de actieve/actuele link */
.topnav a.active {
  achtergrondkleur: #04AA6D;
  kleur: wit;
}

Probeer het zelf

Related pages

Tutorial:How to create a responsive top navigation

Tutorial:CSS navigation bar