Horizontale Navigation mit CSS gestalten – umfassender Leitfaden
Die horizontale Navigation ist ein häufig genutzter Menü-Typ auf Websites. Sie ermöglicht eine übersichtliche Darstellung der wichtigsten Menüpunkte und sorgt für eine intuitive Benutzerführung. In diesem Leitfaden zeigen wir, wie mit CSS eine ansprechende und funktionale horizontale Navigation erstellt wird.
Grundlagen der horizontalen Navigation
Die horizontale Navigation erstreckt sich über die Breite der Webseite und besteht aus einer Liste von Links, die nebeneinander angeordnet sind und mit CSS gestaltet werden. Die Navigation ist häufig im oberen Bereich der Webseite angeordnet. Sie bietet dem User direkten Zugang zu den wichtigsten Seiten der Website.
Die ungeordnete Liste ist die Basis für die horizontale Navigation. Mit CSS können wir die Liste leicht in eine ansprechend gestaltete horizontale Navigationsleiste umwandeln.
Grundlegendes Styling für die horizontale Navigation
Standardmäßig hat die ungeordnete Liste (UL-Liste) einen vertikalen Außenabstand (Margin) von 1em und links einen Innenabstand (Padding) von 40px. Vor die Listenelemente wird ein Bullet Point als Aufzählungszeichen eingefügt.
Der Standard-Style von UL ist für die Navigation nicht geeignet und muss angepasst werden:
Default Einstellungen von UL für die Navigation
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Das LI-Element ist ein Blockelement. Es beginnt deshalb stets in einer neuen Zeile.
Das Standardverhalten von LI muss so geändert werden, dass die Elemente der Liste nebeneinander angeordnet werden. Wir verwenden display: inline-block, um margin für horizontale Außenabstände nutzen zu können.
Die Elemente der Liste horizontal in einer Reihe anordnen
nav li {
display: inline-block;
margin: 0 1em;
}
Horizontale Navigation gestalten
Die Gestaltung der horizontalen Navigation ist von entscheidender Bedeutung für die Benutzerfreundlichkeit der Website. Eine gut gestaltete Navigation sollte übersichtlich sein und eine klare Struktur besitzen. Sie muss gut lesbar und einfach in der Handhabung sein. Die Gestaltung durch Hintergrund und Schriftfarbe, sowie die Anordnung der Elemente und die Abstände spielen dabei eine entscheidende Rolle.
Eine gute und benutzerfreundliche Navigation (Linkleiste) ist wichtig, damit Besucher die Inhalte schnell finden, die sie suchen.
Horizontale Navigation formatieren
/* horizontale Navigation: display: inline-block */
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
width: 12em;
background: #6ccd6c;
}
nav a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
color: #000000;
}
nav a:hover {
background: #ffa500;
}
Horizontale Navigation erstellen
<h2>horizontale Navigation mit display: inline-block</h2>
<nav>
<ul>
<li><a href="#">Linktext #1</a></li>
<li><a href="#">Linktext #2</a></li>
<li><a href="#">Linktext #3</a></li>
<li><a href="#">Linktext #4</a></li>
</ul>
</nav>
Horizontale Navigation mit flexibler Breite der Elemente
Die Navigation auf Basis der ungeordneten Liste kann auch die gesamte Breite der Seite in Anspruch nehmen. Im folgenden Beispiel wird die Breite der Menüpunkte flexibel durch den Text bestimmt. Die Klasse active wird für den Link der der aktuellen Seite verwendet, damit der User weiß, auf welcher Seite er sich gerade befindet.
Horizontale Full-Width Navigation formatieren
/* horizontale Navigation: ganze Breite der Seite */
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #666666;
overflow: hidden;
clear: both;
}
nav li {
margin: 0;
padding: 0;
float: left;
}
nav li a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
color: #ffffff;
}
nav li a:hover:not(.active) {
background: #bbbbbb;
color: #000000;
}
nav li a.active {
background: #04aa6d;
}
Horizontale Full-Width Navigation erstellen
<h2>horizontale Navigation 100% Breite</h2>
<nav>
<ul>
<li><a class="active" href="#">Startseite</a></li>
<li><a href="#">Unser Service</a></li>
<li><a href="#">Aktuelle Aktionen</a></li>
<li><a href="#">Über uns</a></li>
</ul>
</nav>
Horizontale Navigation mit Flexbox erstellen
Flexbox ist ein universell einsetzbares Layout-Werkzeug zum Gestalten einer flexiblen eindimensionalen Anordnung von HTML-Elementen, wie zum Beispiel die Navigation der Website.
Flexbox basiert auf einem Flex-Container, in dem mehere Flex-Item eingefügt werden. Damit der Flex-Container die Information erhält, dass Flexbox verwendet wird, erhält er die Eigenschaft display: flex.
Die Flexbox-Navigation ist in hohem Maße barrierefrei und lässt sich sehr leicht an unterschiedliche Bildschirmgrößen anpassen. UL ist der Flex-Container und die Listenelemente sind die Flex-Items.
Horizontale Navigation formatieren mit Flexbox
/* horizontale Navigation mit Flexbox, volle Seitenbreite */
nav ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
background: #cccccc;
flex-flow: row wrap;
justify-content: flex-start;
}
nav li {
padding: 0;
border-right: 1px solid #000000
}
nav li a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
color: #000000;
}
nav li a:hover:not(.active) {
background: #bbbbbb;
color: #000000;
}
nav li a.active {
background: #04aa6d;
color: #ffffff;
}
Horizontale Navigation mit Flexbox erstellen
<h2>horizontale Navigation mit Flexbox</h2>
<nav>
<ul>
<li><a class="active" href="#">Startseite</a></li>
<li><a href="#">Unser Service</a></li>
<li><a href="#">Aktuelle Aktionen</a></li>
<li><a href="#">Über uns</a></li>
</ul>
</nav>