Navigation mit CSS gestalten – benutzerfreundliche Anleitung für Einsteiger
Die Navigation ist ein zentrales Element, das für fast jede Website notwendig ist. Sie hilft Besuchern, sich auf der Website zu orientieren und schnell die gewünschten Inhalte zu erreichen. Eine gut gestaltete Navigation verbessert nicht nur die Benutzerfreundlichkeit, sondern ist auch wesentlich für die Suchmaschinenoptimierung. In diesem Leitfaden zeigen wir, wie man mit CSS eine einfache und dennoch ansprechende Navigation erstellen kann.
Grundlagen für den Aufbau einer Navigation
CSS macht es möglich, HTML-Elemente visuell zu gestalten und zu positionieren. Die Navigation besteht in der Regel aus Liste von Links, die mit HTML definiert und mit CSS gestaltet werden. Eine intuitive Navigation ist ein entscheidender Faktor für eine gute User Experience und stellt sicher, dass Besucher sich auf der Website schnell orientieren können.
Die grundlegende Struktur einer Navigation ist in der Regel gleich aufgebaut. Normalerweise wird sie als ungeordnete Liste erstellt, die die Links der Website enthält. Die Links werden als Liste organisiert, um eine semantisch korrekte Darstellung zu gewährleisten. Moderne Websites verwenden grundsätzlich eine Kombination aus HTML und CSS, um eine ansprechende Navigation zu erstellen.
Entfernen der Bullet Points und Anpassen der Abstände
Standardmäßig hat die ungeordnete Liste (UL-Liste) eine bestimmte Formatierung. Die Liste hat oben und unten einen Außenabstand (Margin) von 1em und links einen Einzug von 40px. Diese Standard-Eigenschaften von UL sind für eine Navigation nicht geeignet und müssen angepasst werden.
Standard-Eigenschaften für die Navigation:
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Grundlegende Styling-Techniken für die Navigation
Das Design der Navigation ist entscheidend für die Benutzerfreundlichkeit einer Website. Eine gut gestaltete Navigation sollte übersichtlich, klar strukturiert und einfach bedienbar sein. Die Gestaltung durch Farben, die Anordnung der Elemente und die Lesbarkeit der Schrift spielen dabei eine entscheidende Rolle.
eine einfache vertikale Navigation formatieren
/* Navigation definieren */
nav ul {
margin: 0;
padding: 0;
width: 12em;
list-style-type: none;
background: #cccccc;
}
nav li a {
display: block;
padding: 0.5em 0.25em;
text-decoration: none;
color: #000000;
}
nav li a:hover {
background: #dd0000;
color: #ffffff;
}
einfache vertikale Navigation erstellen
<h2>Eine einfache Navigation</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>
Wir verwenden in diesem Beispiel anstelle echter URLs das Rautezeichen # (Englisch: Hash-Sign) für das href-Attribut. In einer realen Navigation muss für href die URL einer Webseite oder ein Ankerlink, auf eine Sprungmarke angegeben werden.
Eine ansprechende Navigation muss gut sichtbar sein und sollte sich optisch vom übrigen Inhalt der Webseite abheben. Damit die Website auch mit dem Smartphone genutzt werden kann, ist unbedingt darauf zu achten, dass die Abstände zwischen den Links ausreichend groß genug sind.
Weitere Möglichkeiten zur Gestaltung der Navigation
Ein dezenter Schatten kann die Navigation optisch vom Inhalt der Webseite abheben und eine 3D-Wirkung erzeugen. Dadurch wird nicht nur die Lesbarkeit verbessert, sondern auch die visuelle Hierarchie der Webseite.
vertikale Navigationsleiste mit 3D-Effekt formatieren
/* Navigation definieren */
nav ul {
margin: 0;
padding: 0;
width: 12em;
list-style-type: none;
background: #cccccc;
border: thin solid #444444;
border-radius: 0.5em;
box-shadow: 4px 4px 4px #444444 inset, 6px 6px 6px #999999;
}
nav li a {
display: block;
padding: 0.5em 0.25em;
text-decoration: none;
color: #000000;
}
nav li a:hover {
background: #dd0000;
color: #ffffff;
}
vertikale Navigationsleiste mit 3D-Effekt erstellen
<h2>Navigation mit 3D-Effekt</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>
Fazit
Die Gestaltung der Navigation mit CSS ist ein wichtiger Bestandteil des Web-Designs. Mit der richtigen Technik kann eine optisch ansprechende und funktionale Navigation erstellt werden, die das Nutzererlebnis erheblich verbessert. Dabei spielen Aspekte wie Lesbarkeit, Harmonie der Farben und Abstände eine zentrale Rolle.
Durch gezielten Einsatz von CSS-Styles lassen sich verschiedene Effekte implementieren, die die Navigation visuell attraktiver macht. Wer die Grundlagen zur Erstellung von Navigationen kennt, kann strukturierte und benutzerfreundliche Navigationen erstellen, die das Nutzererlebnis auf der Website erheblich verbessern.
Mit diesen Grundlagen bist du bestens vorbereitet, um eine ansprechende Navigation zu erstellen, die optisch überzeugt und in der Praxis gut funktioniert.