Hoe - Horizontaal scrollmenu
Leer hoe u een horizontaal schuifbaar menu maakt met CSS.
Huis
Nieuws
Contact
Over
Steun
Blog
Hulpmiddelen
Baseren
Aangepast
Meer
Logo
Vrienden
Partners
Mensen
Het werk
Een horizontaal schuifbaar menu maken
Stap 1) HTML toevoegen:
Voorbeeld
<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) CSS toevoegen:
De truc om de navigatiebalk scrollbaar te maken is door overflow:auto
en te gebruiken white-space: nowrap
:
Voorbeeld
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;
}
Tip: Ga naar onze CSS Navbar-zelfstudie voor meer informatie over navigatiebalken.