CSS - Navigation
Autoren: A. Grella, D. Supper, Elektronikschule Tettnang.
Eine Navigationsbar schafft Struktur auf einer Internetseite und gestaltet so den Inhalt übersichtlicher. Zu viele Unterpunkte gehen anderseits auf Kosten der Übersichtlichkeit.
In diesem Artikel wird die Erstellung und Formatierung einer Navbar erklärt. Dabei wird auch die Kombination von Selektoren und deren Wertigkeit verdeutlicht. Darüber hinaus wird das Einbinden eines Favicons veranschaulicht.
Navigation mit CSS
ungeordnete Liste:
ungeordnete Liste: ohne Aufzählungszeichen und horizontal angeordnet:
Für die Navigation werden typischerweise ungeordnete Listen mit CSS manipuliert. Die Liste:
<div class="navbar">
<ul>
<li><a href=".." class="activ">Home</a></li>
<li><a href="..">OSI-Modell</a></li>
<li><a href="..">TCP-IP-Modell</a></li>
</ul>
</div>
wird mit dem CSS-Code
.navbar ul li{
display: inline;
list-style-type: none;
}
horizontal und ohne Aufzählungszeichen angeordnet. Man beachte, dass der Link ggf. noch mit dem CSS-Attribut text-decoration: none; versehen werden muss.
Kombinierte Selektoren
Mit kombinierten Selektoren lässt sich nun die Navbar formatieren. Die <li>-Blöcke sind innerhalb der Klasse .navbar angeordnet. Hintergrundfarbe und Größe der Navbar können gesetzt werden:
.navbar{
padding: 10px 0px 10px 0px;
background-color: #0277BD;
}
Des weiteren hilft eine Klasse .activ, die aktuelle Seite hervorzuheben.
.activ{
background-color: #01579B;
}
Man beachte: Zusätzlich können Pseudoklasen das Aussehen optimieren.
ungeordnete Liste: ohne Aufzählungszeichen,horizontal angeordnet und mit kombinierten Selektoren formatiert:
CSS Wertigkeit
| Selektortyp | Beispiel | Punkte |
|---|---|---|
| HTML-Tag | p |
1 |
| Klasse | .navbar |
10 |
| Pseudoklasse | :hover |
10 |
| ID | #top |
100 |
| inline CSS | style="color: red;" |
1000 |
Man beachte, dass sich so CSS-Regeln teilweise überschneiden können. Aus diesem Grund gibt es Wertigkeiten für die Selektoren, welche in der Tabelle aufgelistet sind. Je höher die Wertigkeit eines Selektors desto stärker setzt er sich durch.
Man beachte: Punkte von kombinierten Selektoren werden aufaddiert. Ein <p>-Tag innerhalb der Klasse <div class="navbar"> besitzt so eine Wertigkeit von 11 Punkten.
Favicons einbinden
Favicons sind kleine Grafiken die im Browser eines Desktops vor dem Titel angezeigt werden. Auf mobilen Endgeräten werden diese bei den gespeicherten Favoriten angezeigt. Sie dienen als optisches Wiedererkennungsmerkmal einer Internetseite.
Zum Erstellen eines Favicons nutzt man eine Grafik die man auch online in das entsprechende Format formatieren kann. Um es auf der Seite darzustellen wird im <head>-Tag folgender Code eingebunden:
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
Übung Navigation
Erstelle eine Navbar für Deine Internetseite.
- Setze die Liste mit den Navigationslinks in einen eigenen Layoutbereich
<div class="navbar">...</div>. - Passe Größe und Hintergrundfarbe (dunktel) dieses Bereichs an.
- Setze die einzelnen
<li>-Blöcke nebeneinander und entferne die Aufzählungszeichen. - Passe die Größe und die Schriftgröße der
<li>-Blöcke an. - Formatiere die fünf Pseudoklassen der Links.
- Kopiere die Navbar auf jede einzelne Internetseite.
- Erstelle die Klasse
.activewodurch die aktive Internetseite hervorgehoben wird. - Erstelle ein Favicon für deine Internetseite.
.navbar {
margin: 0px;
padding: 10px 20px 20px 10px;
background-color: ...;
}
.navbar ul li {
display: inline;
list-style-type: none;
font-size: ...;
}
Wortliste und Satzbausteine
| die Navbar, - | eine Navbar (auch Navigationsbar) verlinkt alle Seiten eines Internetauftritts miteinander. Dadurch werden die einzelnen Seiten zugänglich gemacht. |
| kombinierte Selektoren | durch die Kombination von verschiedenen Selektoren lässt sich eine Navbar formatieren |
| CSS Wertigkeit | entscheidet über Priorität der einzelnen Selektoren |
| das Favicon, -s | Das Favicon ist eine kleine Grafik, welche im Browser vor dem Titel angezeigt wird. Sie ist ein Wiedererkennungsmerkmal einer Internetseite. |