Hoe te maken: horizontaal schuifbaar menu

Leer hoe je een horizontaal schuifbaar menu maakt met CSS.

Thuis Nieuws Contact Over Ondersteuning Blog Hulpmiddelen Basis Maatwerk Meer Logo Vrienden Partners Mensen Werk

Try it yourself

Hoe een horizontaal schuifbaar menu te maken

Stap 1 - Voeg HTML toe:

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

Stap 2 - Voeg CSS toe:

De truc om een navigatiemenu schuifbaar te maken is het gebruik van overflow:auto en 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;
}

Try it yourself

Related pages

Tutorial:CSS navigation bar