Navigation

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.



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.

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



Selektor­tpy 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">

Internetseite mit Favicon

Übung Navigation

Erstelle eine Navbar für Deine Internetseite.

Internetseite mit CSS-formatierter Navigation

  1. Setze die Liste mit den Navigationslinks in einen eigenen Layoutbereich <div class="navbar">...</div>.
  2. Passe Größe und Hintergrundfarbe (dunktel) dieses Bereichs an.
  3. Setze die einzelnen <li>-Blöcke nebeneinander und entferne die Aufzählungszeichen.
  4. Passe die Größe und die Schriftgröße der <li>-Blöcke an.
  5. Formatiere die fünf Pseudoklassen der Links.
  6. Kopiere die Navbar auf jede einzelne Internetseite.
  7. Erstelle die Klasse .active wodurch die aktive Internetseite hervorgehoben wird.
  8. 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 Nav­bar, - eine Nav­bar (auch Navi­gations­bar) ver­linkt alle Seiten eines Inter­net­auf­tritts mit­einander. Dadurch werden die ein­zelnen Seiten zu­gänglich gemacht.
kombi­nierte Selek­toren durch die Kom­bination von ver­schiedenen Selek­toren lässt sich eine Navbar for­matieren
CSS Wertig­keit entscheidet über Priorität der einzelnen Selektoren
das Fav­icon, -s Das Fav­icon ist eine kleine Grafik, welche im Browser vor dem Titel angezeigt wird. Sie ist ein Wieder­erken­nungs­merkmal einer Inter­net­seite.
© mylime.info