HTMLCSSJavaScriptIndexRoadmapImpressum

Horizontale Menüs

Horizontale Menüs sind die klassische Navigation am oberen Rand einer Website. Sie bestehen aus einer Liste von Links, die nebeneinander angeordnet werden.

HTML-Grundstruktur

Für Menüs nutzt du semantisch das Element <nav>. Darin steht eine ungeordnete Liste mit Links – ein Eintrag pro Menüpunkt.

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

Standardmäßig zeigt <ul> Aufzählungspunkte und Abstände. Für ein Menü entfernst du diese mit list-style: none und setzt margin sowie padding auf 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

Horizontal mit Flexbox

Mit display: flex ordnest du die Listeneinträge nebeneinander an. gap sorgt für gleichmäßigen Abstand zwischen den Menüpunkten.

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 Flexbox-Menü

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

Ausgabe

Achte darauf, dass Links im Menü gut klickbar sind. Mit display: block und padding vergrößerst du die Klickfläche. 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    gap: 16px;
4    list-style: none;
5    margin: 0;
6    padding: 0;
7}
8
9nav {
10    background-color: #2c3e50;
11    padding: 8px 12px;
12}
13
14nav a {
15    display: block;
16    padding: 8px 16px;
17    color: #ecf0f1;
18    text-decoration: none;
19    border-radius: 4px;
20}
21
22nav a.active {
23    background-color: #3498db;
24}

Ausgabe

Hover und Active

Mit :hover reagierst du, wenn die Maus über einem Link liegt. :active greift beim Klicken – so wirkt das Menü 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    gap: 16px;
4    list-style: none;
5    margin: 0;
6    padding: 0;
7}
8
9nav {
10    background-color: #2c3e50;
11    padding: 8px 12px;
12}
13
14nav a {
15    display: block;
16    padding: 8px 16px;
17    color: #ecf0f1;
18    text-decoration: none;
19    border-radius: 4px;
20}
21
22nav a:hover {
23    background-color: #34495e;
24}
25
26nav a:active {
27    transform: scale(0.97);
28}

Ausgabe

Im nächsten Kapitel lernst du: Vertikale Menüs