CSS - Navigationsleiste

Grundlagen der Navigationsleiste

Eine Navigationsleiste, kurz Navbar, ist ein wichtiger Teil des Webdesigns, der Benutzern hilft, sich durch eine Website zu bewegen. Sie enthält normalerweise eine Liste von Links, die Benutzer zu verschiedenen Abschnitten oder Seiten der Website führen. In diesem Abschnitt lernen Sie die grundlegende Struktur einer Navbar mit HTML, wie man sie mit CSS gestaltet und wie man sie auf der Seite positioniert.

Um eine einfache Navbar mit HTML zu erstellen, verwenden Sie das <nav>-Element, um eine Liste von Links zu umschließen. Innerhalb des <nav>-Elements verwenden Sie eine ungeordnete Liste (<ul>), um die Navigationselemente zu halten. Jedes Element in der Liste wird durch ein Listenelement (<li>) dargestellt, das ein Ankerelement (<a>) mit einem href-Attribut enthält, das auf die gewünschte Seite oder den gewünschten Abschnitt verweist.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Dienstleistungen</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

Sobald Sie die grundlegende HTML-Struktur erstellt haben, verwenden Sie CSS, um die Navbar zu gestalten. Sie können Stile auf die Elemente <nav>, <ul>, <li> und <a> anwenden, um deren Aussehen zu ändern. Entfernen Sie zum Beispiel die Standard-Listenformatierung mit list-style: none;, fügen Sie Padding und Margin zu Listenelementen hinzu und gestalten Sie Links mit benutzerdefinierten Farben und Schriftarten.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

Die Positionierung der Navbar auf Ihrer Seite ist wichtig für das Webdesign. Verwenden Sie CSS, um ihre Platzierung zu steuern. Standardmäßig wird sie im normalen Dokumentenfluss positioniert. Sie können jedoch Änderungen der position-Eigenschaft wie position: fixed; verwenden, damit sie auch beim Scrollen oben bleibt.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px;
}

Durch das Verständnis dieser Grundlagen - Struktur, Gestaltung und Positionierung - können Sie eine funktionale Navigation für Ihre Website erstellen.

Erstellung einer horizontalen Navigationsleiste

Eine horizontale Navigationsleiste ist eine gängige Designwahl für Websites, da sie einfachen Zugang zu Hauptbereichen oder Seiten in einer einzelnen Zeile bietet. Um eine horizontale Navigationsleiste zu erstellen, beginnen Sie mit einer ungeordneten Liste (<ul>) innerhalb eines <nav>-Elements. Jedes Listenelement (<li>) stellt einen Navigationspunkt dar und enthält ein Anker-Element (<a>) mit einem href-Attribut, das auf die entsprechende Seite oder den entsprechenden Abschnitt verweist.

Um die Listenelemente horizontal anzuordnen, verwenden Sie die CSS-Eigenschaft display: inline-block; für die <li>-Elemente. Dadurch werden sie nebeneinander anstatt übereinander gestapelt angezeigt. Fügen Sie den Listenelementen etwas Padding hinzu, um Platz zwischen ihnen zu schaffen, und verwenden Sie Margin, um die Gesamtpositionierung der Navigationsleiste zu steuern.

<nav>
  <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Leistungen</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
}

nav a {
  color: #333;
}

nav a:hover {
  background-color: #333;
}

Erstellen einer vertikalen Navigationsleiste

Eine vertikale Navigationsleiste ordnet Navigationselemente vertikal an. Dieses Design ist nützlich, wenn Sie begrenzten horizontalen Platz haben oder eine seitliche Navigation erstellen möchten. Um eine vertikale Navigationsleiste zu erstellen, beginnen Sie mit einer ungeordneten Liste (<ul>) innerhalb eines <nav>-Elements. Anstatt die Listenelemente als Inline-Block-Elemente anzuzeigen, formatieren Sie sie als Block-Elemente.

<nav>
  <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Leistungen</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: block;
  margin-bottom: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
  width: 200px;
}

nav a {
  color: #333;
  text-decoration: none;
}

nav a:hover {
  background-color: #333;
  color: #fff;
}

Responsive Navbars

Es ist wichtig, responsive Navbars zu erstellen, die sich an verschiedene Viewport-Breiten anpassen. Responsive Navbars bieten eine gute Benutzererfahrung, indem sie ihr Layout und ihre Funktionalität basierend auf dem verfügbaren Bildschirmplatz anpassen. In diesem Abschnitt verwenden wir Media Queries, um responsive Navbars zu erstellen, die Navbar basierend auf der Bildschirmgröße ein- und auszublenden und eine Umschalttaste für mobile Geräte zu erstellen.

Media Queries sind eine CSS-Funktion, mit der Sie verschiedene Stile basierend auf den Eigenschaften des Geräts, wie z.B. der Bildschirmbreite, anwenden können. Um eine responsive Navbar zu erstellen, können Sie Media Queries verwenden, um ihr Layout und Styling an verschiedenen Breakpoints zu ändern. Sie können eine horizontale Navbar auf größeren Bildschirmen haben und auf kleineren Bildschirmen zu einer vertikalen oder ausgeblendeten Navbar wechseln.

/* Stile für größere Bildschirme */
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px;
}

/* Stile für kleinere Bildschirme */
@media (max-width: 600px) {
  nav {
    flex-direction: column;
  }

  nav ul {
    display: none;
  }
}

In diesem Beispiel wird die Navbar auf größeren Bildschirmen als Flex-Container mit Abstand zwischen den Elementen angezeigt. Wenn die Bildschirmbreite 600 Pixel oder weniger beträgt, wechselt die Navbar zu einem vertikalen Layout mit flex-direction: column;, und Navigationselemente werden mit display: none; ausgeblendet.

Um Zugriff auf die ausgeblendete Navbar auf kleineren Bildschirmen zu ermöglichen, können Sie eine Umschalttaste erstellen. Mit der Umschalttaste können Benutzer die Navbar durch Anklicken ein- oder ausblenden. Sie können diese Schaltfläche mit HTML und CSS erstellen und JavaScript für die Umschaltfunktionalität verwenden.

<nav>
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Dienstleistungen</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
}

@media (max-width: 600px) {
  .hamburger {
    display: block;
  }
}

const hamburger = document.querySelector('.hamburger');
const navList = document.querySelector('nav ul');

hamburger.addEventListener('click', () => {
   navList.classList.toggle('show');
});