Wie man erstellt: Horizontales scrollbares Menü

Lernen Sie, wie Sie ein horizontal scrollbares Menü mit CSS erstellen.

Startseite Nachrichten Kontakt Über Unterstützung Blog Werkzeuge Basis Benutzerdefiniert Mehr Logo Freunde Partner Menschen Arbeit

亲自试一试

Wie man ein horizontal scrollbares Menü erstellt

Schritt 1 - Fügen Sie HTML hinzu:

<div class="scrollmenu">
  <a href="#home">Startseite</a>
  <a href="#news">Nachrichten</a>
  <a href="#contact">Kontakt</a>
  <a href="#about">Über</a>
  ...
</div>

Schritt 2 - Fügen Sie CSS hinzu:

Der Trick, um eine rollbare Navigationsleiste zu erstellen, ist die Verwendung von overflow:auto und 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;
}

亲自试一试

相关页面

教程：CSS 导航栏