CSS - Navigationsleiste: Dein Tor zur Website-Navigation

Hallo da draußen, zukünftige Webentwickler! Heute begeben wir uns auf eine aufregende Reise in die Welt der CSS-Navigationsleisten. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich hier, um dich durch diesen wichtigen Aspekt des Webdesigns zu führen. Also hol dir dein Lieblingsgetränk, mach dich bequem und tauchen wir ein!

CSS - Navbar

Was ist eine Navigationsleiste?

Bevor wir mit dem Coden beginnen, lassen wir uns erst einmal anschauen, was eine Navigationsleiste ist. Stell dir vor, du bist in einer riesigen Bibliothek. Wie findest du das Buch, das du suchst? Du verwendest Schilder und Verzeichnisse, oder? Eine Navigationsleiste ist für Websites so etwas. Es ist eine Reihe von Links, die den Benutzern helfen, auf deiner Website leicht navigieren zu können.

Nun schauen wir uns verschiedene Arten von Navigationsleisten an und wie man sie mit CSS erstellt.

CSS Horizontale Navigationsleiste

Eine horizontale Navigationsleiste ist wahrscheinlich die am häufigsten auf Websites zu sehende Art. Es ist wie eine Reihe von Schaltflächen oben auf der Seite.

Hier ist ein einfaches Beispiel:

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#services">Dienste</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>

Und hier ist der CSS-Code, um es gut aussehen zu lassen:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #111;
}

Lassen wir das auseinanderbrechen:

Wir entfernen die Aufzählungszeichen aus der Liste mit list-style-type: none;
Wir schweben die Listenelemente nach links, um sie horizontal zu machen
Wir gestalten die Links, um wie Schaltflächen auszusehen
Wir fügen eine Hover-Animation hinzu, um interaktiv zu machen

CSS Vertikale Navigationsleiste

Manchmal möchtest du deine Navigationsleiste vertikal haben, insbesondere auf mobilen Geräten oder in Seitensäulen. Hier ist, wie du das machen kannst:

<ul class="vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">Nachrichten</a></li>
<li><a href="#contact">Kontakt</a></li>
<li><a href="#about">Über uns</a></li>
</ul>

Und der CSS-Code:

.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Der Hauptunterschied hier ist, dass wir die Listenelemente nicht schweben lassen. Stattdessen geben wir der gesamten Navigationsleiste eine Breite und lassen die Listenelemente natürlich stapeln.

CSS Dropdown-Navigationsleiste

Nun fügen wir ein bisschen Pep mit einem Dropdown-Menü hinzu! Das ist großartig für die Organisation von Unterkategorien.

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Produkte</a>
<div class="dropdown-content">
<a href="#">Laptops</a>
<a href="#">Tablets</a>
<a href="#">Smartphones</a>
</div>
</li>
<li><a href="#contact">Kontakt</a></li>
</ul>

Und der CSS-Code:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

Dieser CSS-Code verwendet die :hover-Pseudo-Klasse, um das Dropdown-Inhalt anzuzeigen, wenn der Benutzer über den "Produkte"-Link hovers.

CSS Fixierte Navigationsleiste

Eine fixierte Navigationsleiste bleibt an Ort und Stelle, auch wenn du scrollst. Es ist wie ein persönlicher Guide, der immer da ist, wenn du ihn brauchst.

Um eine Navigationsleiste fixiert zu machen, müssen wir nur eine Zeile zu unserem CSS hinzufügen:

.navbar {
/* ... andere Stile ... */
position: fixed;
top: 0;
width: 100%;
}

Das hält die Navigationsleiste immer oben auf dem Bildschirm.

CSS Klebrige Navigationsleiste

Eine klebrige Navigationsleiste ist ähnlich wie eine fixierte Navigationsleiste, aber sie wird nur fixiert, wenn du darüber hinunterscrollerst. Es ist wie ein Freund, der dich folgt, aber nur, wenn du eine bestimmte Distanz gegangen bist.

Hier ist, wie man eine klebrige Navigationsleiste macht:

.navbar {
/* ... andere Stile ... */
position: sticky;
top: 0;
}

Der Unterschied ist, dass wir position: sticky anstelle von position: fixed verwenden.

Trennlinien für Navigationsleiste

Manchmal möchtest du deine Navigationsleisten-elemente mit Linien trennen. Hier ist ein cooler Trick, um das zu tun:

.navbar li {
border-right: 1px solid #bbb;
}

.navbar li:last-child {
border-right: none;
}

Das fügt eine Linie zwischen jedem Element hinzu, außer dem letzten.

Fixierte Vertikale Navigationsleiste

Zuletzt kombinieren wir, was wir gelernt haben, um eine fixierte vertikale Navigationsleiste zu erstellen:

<ul class="fixed-vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">Nachrichten</a></li>
<li><a href="#contact">Kontakt</a></li>
<li><a href="#about">Über uns</a></li>
</ul>

Und der CSS-Code:

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Das erstellt eine vertikale Navigationsleiste, die links auf dem Bildschirm bleibt, während du scrollst.

Fazit

Und da hast du es, Leute! Wir haben eine Vielzahl von Navigationsleisten-Stilen abgedeckt, von horizontal bis vertikal, von Dropdown bis fixiert. Denke daran, Übung macht den Meister, also habe keine Angst, diese Stile auszuprobieren und deine eigenen einzigartigen Navigationsleisten-Designs zu erstellen.

Hier ist eine Tabelle, die die verschiedenen Navigationsleisten-Typen zusammenfasst, die wir behandelt haben:

Navigationsleisten-Typ	Schlüssel-CSS-Eigenschaft	Hauptmerkmal
Horizontal	`float: left;`	Elemente horizontal ausgerichtet
Vertikal	`width: [Wert];`	Elemente vertikal gestapelt
Dropdown	`:hover`	Zeigt zusätzliche Optionen bei Hover an
Fixiert	`position: fixed;`	Bleibt an Ort und Stelle beim Scrollen
Klebrig	`position: sticky;`	Wird fixiert, nachdem man darüber hinunterscrollt

Denke daran, Coden ist wie Kochen - du beginnst mit einfachen Rezepten, aber wenn du dich wohler fühlst, kannst du deine eigenen Aromen hinzufügen. Also mische und kombiniere diese Stile und erschaffe etwas Köstliches... ich meine, visuell Ansprechendes!

Frohes Coden und möge deine Navigationsleisten immer zu aufregenden Zielen führen!

Credits: Image by storyset