Wie erstellt man: Festes Menü

Wie erstellt man ein festes Obermenü

Schritt 1 - Fügen Sie HTML hinzu:

<div class="navbar">
  <a href="#home">Startseite</a>
  <a href="#news">Nachrichten</a>
  <a href="#contact">Kontakt</a>
</div>
<div class="main">
  <p>Einige Texte einige Texte einige Texte einige Texte..</p>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

Um ein festes Menü an der Oberseite zu erstellen, verwenden Sie position:fixed und top:0Beachten Sie, dass das feste Menü Ihre anderen Inhalte überlagern kann. Um dieses Problem zu lösen, fügen Sie eine Außenabstand (margin-top) hinzu, die gleich oder größer als die Höhe des Menüs ist.

/* Navigationsleiste */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Setzen Sie die Navigationsleiste auf einen festen Ort */
  top: 0; /* Setzen Sie die Navigationsleiste an den oberen Rand der Seite */
  width: 100%; /* Volle Breite */
}
/* Links in der Navigationsleiste */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Ändern Sie den Hintergrund beim Mausüberfahren */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Hauptinhalt */
.main {
  margin-top: 30px; /* Fügen Sie einen oberen Außenabstand hinzu, um das Überlappen von Inhalten zu verhindern */
}

Try it yourself

Wie erstellt man ein festes Footer-Menü

Um ein festes Footer-Menü zu erstellen, verwenden Sie position:fixed und bottom:0:

/* Navigationsleiste */
.navbar {
  position: fixed; /* Setzen Sie die Navigationsleiste auf einen festen Ort */
  bottom: 0; /* Setzen Sie die Navigationsleiste an den unteren Rand der Seite */
  width: 100%; /* Volle Breite */
}
/* Hauptinhalt */
.main {
  margin-bottom: 30px; /* Fügen Sie einen unteren Außenabstand hinzu, um das Überlappen von Inhalten zu verhindern */
}

Try it yourself

Related pages

Tutorial:CSS navigation bar