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. Bei der Navigation handelt es sich grundsätzlich um eine Liste von Links. Die Links, werden mit HTML definiert und können 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.
Die Voreinstellung von UL ist für die Navigation nicht geeignet und muss geändert werden:
Default Einstellung von UL für die Navigation
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Grundlegende Styling-Techniken für die Navigation
Wir verwenden Custom Properties, um das Layout der Navigation zu definieren. Es ist allgemein üblich, Custom Properties für die Pseudoklasse :root zu definieren, so dass sie global referenziert werden können. Custom Properties werden stets mit -- eingeleitet. Auf diese Weise lässt sich die Navigation besonders komfortabel anpassen. Für den Zugriff auf benutzerdefinierte Eigenschaften wird die CSS-Funktion var(…) verwendet.
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
/* Einstellungen für die Navigation */
:root {
--vNavWidth: 12em;
--vNavBG: #cccccc;
--vNavFG: #000000;
--vNavHoverBG: #dd0000;
--vNavHoverFG: #ffffff;
--vNavBorderColor: #999999;
--vNavBorderWidth: 1px;
}
nav ul {
margin: 0;
padding: 0;
width: var(--vNavWidth);
list-style-type: none;
background: var(--vNavBG);
}
nav li {
padding: 0;
border-bottom: var(--vNavBorderWidth) solid var(--vNavBorderColor);
}
nav li:last-child {
border-bottom: none;
}
nav li a {
display: block;
padding: 0.5em 0.25em;
text-decoration: none;
color: var(--vNavFG);
}
nav li a:hover {
background: var(--vNavHoverBG);
color: var(--vNavHoverFG);
}
Einfache vertikale Navigation erstellen
<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>
einfache vertikale Navigation
Wir verwenden in diesem Beispiel anstelle echter URLs das Rautezeichen (Englisch: Hash Character) # für das Attribut href. In einer realen Navigation muss für href die URL einer Webseite oder ein Ankerlink auf eine Sprungmarke angegeben werden.
Der Abstand der Schaltflächen in diesem Beispiel ist für mobile Endgeräte nicht ausreichend. Damit die Navigation auch für Smartphones oder Tablets geeignet ist, müssen wir wir den Abstand zwischen den LI-Elementen vergrößern. Diese Anpassung lässt sich mit Hilfe von Media Queries einstellen.
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
/* Einstellungen für die Navigation */
:root {
--vNavWidth: 12em;
--vNavBG: #dfdfdf;
--vNavFG: #000000;
--vNavHoverBG: #dd0000;
--vNavHoverFG: #ffffff;
--vNavBorderColor: #444444;
--vNavBorderWidth: thin;
}
nav ul {
margin: 0;
padding: 0;
width: var(--vNavWidth);
list-style-type: none;
background: var(--vNavBG);
border: var(--vNavBorderWidth) solid var(--vNavBorderColor);
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: var(--vNavFG);
}
nav li a:hover {
background: var(--vNavHoverBG);
color: var(--vNavHoverFG);
}
Vertikale Navigationsleiste mit 3D-Effekt erstellen
<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>
Navigation mit 3D-Effekt
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.