Hur man skapar: horisontell rullbar meny

Lär dig hur du använder CSS för att skapa en horisontell rullbar meny.

Hem Nyheter Kontakt Om Support Blogg Verktyg Bas Anpassad Mer Logotyp Vänner Partners Människor Arbete

Prova själv

Hur man skapar en horisontell rullbar meny

Steg 1 - Lägg till HTML:

div.class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  ...
</div>

Steg 2 - Lägg till CSS:

Tekniken att göra navigationsmenyn rullbar är att använda overflow:auto och 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;
}

Prova själv

Relaterade sidor

Tutorial:CSS navigationsfält