How TO - Horizontales Scroll-Menü
Erfahren Sie, wie Sie mit CSS ein horizontal scrollbares Menü erstellen.
Heim
Nachrichten
Kontakt
Etwa
Unterstützung
Bloggen
Werkzeug
Base
Brauch
Mehr
Logo
Freunde
Partner
Menschen
Arbeiten
So erstellen Sie ein horizontal scrollbares Menü
Schritt 1) HTML hinzufügen:
Beispiel
<div class="scrollmenu">
<a href="#home">Home</a>
<a
href="#news">News</a>
<a href="#contact">Contact</a>
<a
href="#about">About</a>
...
</div>
Schritt 2) CSS hinzufügen:
Der Trick, um die Navigationsleiste scrollbar zu machen, ist die Verwendung von overflow:auto
and white-space: nowrap
:
Beispiel
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;
}
Tipp: Gehen Sie zu unserem CSS Navbar Tutorial , um mehr über Navigationsleisten zu erfahren.