Sådan oprettes: Vandret rullemenu

Lær hvordan man bruger CSS til at oprette en vandret rullemenu.

Hjem Nyheder Kontakt Om Support Blog Værktøjer Basis Tilpasning Mere Logo Venner Partnere Mennesker Arbejde

Prøv det selv

Sådan oprettes en vandret rullemenu

Første trin - Tilføj HTML:

<div class="scrollmenu">
  <a href="#home">Hjem</a>
  <a href="#news">Nyheder</a>
  <a href="#contact">Kontakt</a>
  <a href="#about">Om</a>
  ...
</div>

Andet trin - Tilføj CSS:

Den teknik til at gøre navigationsfeltet rulbart er at bruge overflow:auto og white-space:nowrap:

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}
div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}

Prøv det selv

Relaterte sider

Læringsvideo:CSS navigationsfelt