So erstellen Sie eine Navigationsleiste mit HTML und CSS

Eine gut gestaltete und funktionale Navigationsleiste (Navbar) ist eine der Schlüsselkomponenten jeder Website. Es dient als Roadmap für Benutzer 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 So erstellen Sie eine Navigationsleiste mit HTML und CSS, Menüelementen und einer Call-to-Action-Schaltfläche. Hier ist der HTML- und CSS-Code:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <style>
      body {
        background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
        height: 100vh;
        margin: 0;
        padding-top: 10px;
      }

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

      .logo {
        width: 12rem;
      }

      .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 {
        background-color: #2258c3;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
      }

      button:hover {
        background-color: #fd2df3;
      }
    </style>
  

  
    <nav class="navbar">
      <img src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png" alt="So erstellen Sie eine Navigationsleiste mit HTML und CSS" class="logo">

      <ul class="menu">
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About Us</a></li>
        <li class="item"><a href="#">Contact Us</a></li>
        <li class="item"><a href="#">Blog</a></li>
      </ul>

      <button type="submit">Call Now</button>
    </nav>
  

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 So erstellen Sie eine Navigationsleiste mit HTML und CSS (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 eingebunden, das als Container für die Navigationsleiste fungiert.

<nav class="navbar">
  <img src="logo-url" alt="So erstellen Sie eine Navigationsleiste mit HTML und CSS" class="logo">
  <ul class="menu">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Contact Us</a></li>
    <li class="item"><a href="#">Blog</a></li>
  </ul>
  <button type="submit">Call Now</button>
</nav>

Das So erstellen Sie eine Navigationsleiste mit HTML und CSS wird mit einem -Tag erstellt. Das Menü ist eine ungeordnete Liste (

)

, die Listenelemente (

)

enthält, und jedes Listenelement hat ein Ankertag () um Links zu verschiedenen Seiten zu erstellen. Schließlich ist die Schaltfläche ein einfaches Tag mit Stil.

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 So erstellen Sie eine Navigationsleiste mit HTML und CSS, 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 (oben: 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 liefert 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 Schweben ä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 bleibt die Navigationsleiste immer im Vordergrund

Um den Header oben auf der Seite mit CSS 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;
}

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Navigationsleiste mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!