HTMLCSSJavaScriptIndexRoadmapImpressum

Vertikale Menüs

Vertikale Menüs eignen sich besonders für Sidebars und Unterseiten-Navigation. Die Menüpunkte stehen untereinander – ideal links oder rechts neben dem Hauptinhalt.

HTML-Grundstruktur

Die HTML-Struktur ist dieselbe wie bei horizontalen Menüs: <nav> mit einer <ul> und Links in <li>-Elementen.

HTML Menü-Struktur

1<nav>
2    <ul>
3        <li><a href="#">Start</a></li>
4        <li><a href="#">Kurse</a></li>
5        <li><a href="#">Kontakt</a></li>
6    </ul>
7</nav>

Ausgabe

Listen-Stile entfernen

Zuerst entfernst du die Standard-Listenpunkte und Abstände mit list-style: none, margin: 0 und padding: 0.

HTML Menü-Struktur

1<nav>
2    <ul>
3        <li><a href="#">Start</a></li>
4        <li><a href="#">Kurse</a></li>
5        <li><a href="#">Kontakt</a></li>
6    </ul>
7</nav>

CSS Listen-Stile zurücksetzen

1nav ul {
2    list-style: none;
3    margin: 0;
4    padding: 0;
5}

Ausgabe

Vertikal mit Flexbox

Mit display: flex und flex-direction: column ordnest du die Menüpunkte untereinander an. gap sorgt für gleichmäßigen Abstand zwischen den Einträgen.

HTML Menü-Struktur

1<nav>
2    <ul>
3        <li><a href="#">Start</a></li>
4        <li><a href="#">Kurse</a></li>
5        <li><a href="#">Kontakt</a></li>
6    </ul>
7</nav>

CSS Vertikales Flexbox-Menü

1nav ul {
2    display: flex;
3    flex-direction: column;
4    gap: 4px;
5    list-style: none;
6    margin: 0;
7    padding: 0;
8}

Ausgabe

Für eine Sidebar legst du eine feste width am nav-Element fest. Mit display: block und padding füllt jeder Link die volle Breite – das macht die Klickfläche groß und übersichtlich. Die Klasse active markiert die aktuelle Seite.

HTML mit aktiver Seite

1<nav>
2    <ul>
3        <li><a href="#" class="active">Start</a></li>
4        <li><a href="#">Kurse</a></li>
5        <li><a href="#">Kontakt</a></li>
6    </ul>
7</nav>

CSS Link-Styling

1nav ul {
2    display: flex;
3    flex-direction: column;
4    gap: 4px;
5    list-style: none;
6    margin: 0;
7    padding: 0;
8}
9
10nav {
11    width: 220px;
12    background-color: #2c3e50;
13    padding: 8px;
14}
15
16nav a {
17    display: block;
18    padding: 10px 16px;
19    color: #ecf0f1;
20    text-decoration: none;
21    border-radius: 4px;
22}
23
24nav a.active {
25    background-color: #3498db;
26}

Ausgabe

Hover und Active

Mit :hover hebst du den Menüpunkt hervor, über den die Maus gerade liegt. :active reagiert beim Klicken – so wirkt die Navigation direkt und lebendig.

HTML Menü-Struktur

1<nav>
2    <ul>
3        <li><a href="#">Start</a></li>
4        <li><a href="#">Kurse</a></li>
5        <li><a href="#">Kontakt</a></li>
6    </ul>
7</nav>

CSS Hover und Active

1nav ul {
2    display: flex;
3    flex-direction: column;
4    gap: 4px;
5    list-style: none;
6    margin: 0;
7    padding: 0;
8}
9
10nav {
11    width: 220px;
12    background-color: #2c3e50;
13    padding: 8px;
14}
15
16nav a {
17    display: block;
18    padding: 10px 16px;
19    color: #ecf0f1;
20    text-decoration: none;
21    border-radius: 4px;
22}
23
24nav a:hover {
25    background-color: #34495e;
26}
27
28nav a:active {
29    transform: scale(0.97);
30}

Ausgabe

Im nächsten Kapitel lernst du: Media Queries in CSS