Sådan oprettes: Pilleformet navigation

Lær, hvordan du bruger CSS til at oprette en pilleformet navigationsmenu.

Opret pilleformet navigation

Første trin - Tilføj HTML:

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Anden trin - Tilføj CSS:

/* Indstil stil for links i pille-navigationsmenuet */
.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}
/* Ændr farve på link, når musen hover over det */
.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}
/* Tilføj farve til aktiv/current link */
.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}

Prøv det selv

Relaterede sider

Tutorial:CSS navigationsfelt

Tutorial:Sådan opretter man top navigationsfelt