Eine gut gestaltete und funktionale Navigationsleiste (Navigationsleiste) ist eine der Schlüsselkomponenten jeder Website. Es dient Benutzern als Roadmap und hilft ihnen bei der Navigation durch verschiedene Seiten. Eine Navigationsleiste befindet sich üblicherweise oben auf einer Webseite, wo sie für Benutzer immer sichtbar ist und auf wichtige Links zugreifen kann. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML und CSS eine optisch ansprechende und funktionale CSS-Navigationsleiste erstellen. Wir werden auch verschiedene Techniken besprechen, um sicherzustellen, dass die Navigationsleiste oben auf der Seite bleibt.

Sie können sich eine Live-Demo dieser Navigationsleiste ansehen und ihre Funktionalität erkunden, indem Sie die Vorschau auf CodePen besuchen.

Der folgende Codeausschnitt demonstriert die Erstellung einer responsiven Navigationsleiste mit einem Logo, Menüelementen und einer Call-to-Action-Schaltfläche. Hier ist der HTML- und CSS-Code:

Den Code aufschlüsseln
Schauen wir uns genauer an, wie die Navigationsleiste mit HTML und CSS erstellt wird.

HTML-Struktur

Der HTML-Teil des Codes ist unkompliziert. Es besteht aus einem Navigationselement, das drei Hauptkomponenten enthält:

• Ein Logo (ein Bild)
• Eine **Menüliste ** mit anklickbaren Links (Startseite, Über uns, Kontakt, Blog)
• Eine **Schaltfläche **, die als Aufruf zum Handeln dient (Jetzt anrufen)
• Die Struktur ist in ein Element eingeschlossen, das als Container für die Navigationsleiste fungiert.

Das Logo wird mit einem -Tag erstellt. Das Menü ist eine ungeordnete Liste (

)

Styling mit CSS

Die Magie geschieht im CSS-Bereich, wo wir das Layout und das Erscheinungsbild der Navigationsleiste definieren. Lassen Sie uns einige der Schlüsselelemente besprechen.

Hintergrund- und Körperstyling
Der Körper hat einen Hintergrund mit Farbverlauf, der von Blau (#2258c3) zu Rosa (#fd2df3) übergeht. Die Höhe ist auf 100 vh (Ansichtsfensterhöhe) eingestellt, wodurch sichergestellt wird, dass der Hintergrund den gesamten Bildschirm ausfüllt und es keinen Rand gibt, um unerwünschten Platz auf der Seite zu vermeiden.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

Navbar-Styling

Die Navigationsleiste hat einen weißen Hintergrund und abgerundete Ecken (Rahmenradius: 30 Pixel). Die Polsterung und der Rand schaffen Abstand innerhalb und außerhalb der Navigationsleiste. Die display:flex-Eigenschaft macht die Navigationsleiste zu einer Flexbox und ermöglicht die horizontale Ausrichtung ihrer untergeordneten Elemente. Der justify-content: space-between stellt sicher, dass Logo, Menü und Schaltfläche gleichmäßig verteilt sind.

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Befestigen der Navigationsleiste oben

Eine der wichtigsten Funktionen einer Navigationsleiste besteht darin, beim Scrollen oben auf der Seite zu bleiben. Um dies zu erreichen, verwenden wir die Eigenschaft position:fixed. Dadurch bleibt die Navigationsleiste unabhängig vom Scrollen oben (top: 0). Darüber hinaus stellt der Z-Index: 9999 sicher, dass sich die Navigationsleiste immer über anderen Elementen auf der Seite befindet.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Menüelemente und Interaktivität

Die Menüelemente werden horizontal mit display: flex in der .menu-Klasse angezeigt. Den Elementen wird ein Abstand durch den Rand zugewiesen, und jedes Element ist so gestaltet, dass der standardmäßige Listenstil und die Auffüllung entfernt werden. Die Links innerhalb der Menüpunkte haben keine Textdekorationen und sind in fetter Schrift und dunkler Farbe gestaltet.

Der Hover-Effekt auf den Links ändert die Farbe, sodass sie mit der blauen Hintergrundfarbe übereinstimmt (#2258c3) und gibt so einen visuellen Hinweis darauf, dass der Link interaktiv ist.

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

Button-Styling

Die Schaltfläche hat einen blauen Hintergrund (#2258c3), weißen Text und abgerundete Ecken (Rahmenradius: 20 Pixel). Beim Bewegen des Mauszeigers ändert sich der Hintergrund in Rosa (#fd2df3), um dem Farbverlauf im Hintergrund zu entsprechen.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

So behalten Sie die Navigationsleiste immer im Vordergrund

Um die Kopfzeile mit CSS oben auf der Seite zu fixieren, verwenden Sie die Eigenschaft „position: Fixed“ zusammen mit „top: 0“. Dadurch wird sichergestellt, dass die Navigationsleiste beim Scrollen des Benutzers oben bleibt. So wird es im Code angewendet:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}