3.6 Navigationsleiste

3.6 Kombinatoren und Pseudoklassen am Beispiel eines Navigationsmenus

In den folgenden Abschnitten werden wir den Navigationsbereich Schritt für Schritt so formatieren, dass er am Ende als horizontale Menüzeile mit einem grünen Hintergrund und weißer Schrift erscheint. Befindet sich der Mauszeiger über einem Menüpunkt, wird dieser grafisch hervorgehoben, indem sein Hintergrund weiß und seine Schriftfarbe grün wird.

3.6.1 Navigationsbereich

Das HTML-Element nav kennzeichnet den Navigationsbereich der Webseite.

Aufgabe 3-5: Formatieren des Navigationsbereichs

Formatierungsvorgaben

Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:

HTML-Element	Formatierung
nav	Anzeige: Block-Element, das wie ein Inline-Element in der Zeile fließt. Hintergrundfarbe: dunkelgrün (`green`)

CSS-Eigenschaften

Abb. 3-27: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS

Vorschau

Abb. 3-28: Startseite index.html (Zwischenstand nach Aufgabe 3-5)

Lösung

CSS

nav {
background-color: green;
display: inline-block;
}

Abb. 3-29: Ergänzung CSS-Datei styles.css

3.6.2 Navigationsmenü

Die Struktur eines Navigationsmenüs ähnelt dem einer Aufzählungsliste ul. Bei einem einfachen Menü mit nur einer Ebene nehmen die Listenelemente li dabei jeweils einen Menüpunkt auf, der wiederum in Form eines Hyperlinks a realisiert wird:

HTML

<nav>
    <ul>
        <li> <a href="index.html">Startseite</a> </li>
        <li> <a href="bildungswege.html">Bildungswege</a> </li>
        <li> <a href="termine.html">Termine</a> </li>
        <li> <a href="impressum.html">Impressum</a> </li>
    </ul>
</nav>

Abb. 3-30: Navigationsbereich

Bevor wir die Aufzählungsliste (ul), die unser Navigationsmenü beinhaltet, formatieren können, benötigen wir für die entsprechende CSS-Regel einen geeigneten Selektor.

Auf einen einfachen Typselektor ul können wir dabei nicht zurückgreifen, da in diesem Fall alle Aufzählungslisten entsprechend unserer Regel formatiert werden würden. Daher müssen wir dafür sorgen, dass unsere CSS-Regel nur für die ul-Elemente gilt, die sich innerhalb eines nav-Elements befinden. Auf diese Weise können wir auf die Zuweisung einer ID und die Verwendung eines ID-Selektors verzichten.

CSS

nav ul {
...
}

Abb. 3-31: Selektion von ul-Elementen, die sich innerhalb eines nav-Elements befinden

Kombinatoren

Soll eine CSS-Regel nicht für alle Elemente eines bestimmten Typs oder einer bestimmten Klasse gelten, kann die Selektion auf diejenigen Elemente beschränkt werden, die zu einem anderen Element in einer bestimmten Beziehung stehen:

Selektor	Bedeutung	Kombinator
nav ul	Ein `ul`-Element wird selektiert, wenn es sich innerhalb eines `nav`-Elements befindet.	Leerzeichen (Nachfahre)
nav > ul	Ein `ul`-Element wird selektiert, wenn sein Elternelement ein `nav`-Element ist.	`>` (Kind)

Abb. 3-32: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS

Ist eine Selektion der gewünschten Elemente mit Hilfe von Kombinatoren möglich, kann auf die Vergabe einer ID bzw. Klasse verzichtet werden.

Dies ist jedoch nicht immer sinnvoll. Werden im Selektor mehrere Kombinatoren benötigt, um ein bestimmtes Element auszuwählen, oder ist das Element selbst wieder Ausgangspunkt für die Auswahl anderer Elemente, werden die entsprechenden Selektoren sehr komplex. Verständlicher ist in diesen Fällen ein ID-Selektor oder Klassenselektor mit einem Namen, der direkt auf das betreffende Element schließen läßt.

Merke: Kombinator

Aufgabe 3-6: Formatieren des Navigationsbereichs

Formatierungsvorgaben

Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:

HTML-Element	Formatierung
nav ul	Aufzählungszeichen: keine Abstand zwischen dem linken Rand des Elements und seinem Inhalt: 0 Pixel (kein Einzug) Abstand oberhalb des Elements: 2 Pixel Abstand unterhalbhalb des Elements: 4 Pixel

CSS-Eigenschaften

Abb. 3-33: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS

Vorschau

Abb. 3-34: Startseite index.html (Zwischenstand nach Aufgabe 3-6)

Lösung

CSS

nav ul {
    list-style-type: none;
    padding-left: 0px;
    margin-top: 2px;
    margin-bottom: 4px;
}

Abb. 3-35: Ergänzung CSS-Datei styles.css

3.6.3 Menüelemente

Die einzelnen Menüpunkte werden in Form eines Hyperlinks a in jeweils ein Listenelement li eingebettet.

Aufgabe 3-7: Formatierung der Menüelemente I

Formatierungsvorgaben

Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:

HTML-Element	Formatierung
Listenelemente `li`, die sich innerhalb des Navigationsbereichs `nav` befinden.	Anzeige: Block-Element, das wie ein Inline-Element in der Zeile fließt. Abstand links vom Element: 50 Pixel
Ein Hyperlink `a`, der sich innerhalb des Navigationsbereichs `nav` befindet.	Schriftgröße: 0.95em Schriftfarbe: weiß (`white`) Unterstrichen: nein Abstand zwischen dem linken Rand des Elements und seinem Inhalt: 3 Pixel Abstand zwischen dem rechten Rand des Elements und seinem Inhalt: 3 Pixel

CSS-Eigenschaften

Abb. 3-36: Vorgaben zur Formatierung der jeweiligen Elemente mit CSS

Vorschau

Abb. 3-37: Startseite index.html (Zwischenstand nach Aufgabe 3-7)

Lösung

CSS

nav li {
    display: inline-block;
    margin-left: 50px;
}

nav a {
    font-size: 0.95em;
    color: white;
    text-decoration: none;
    padding-left: 3px;
    padding-right: 3px;
}

Abb. 3-38: Ergänzung CSS-Datei styles.css

Nun soll das letzte Menüelement so formatiert werden, dass rechts von ihm ein Abstand von 50 Pixel eingefügt wird. Für die entsprechende CSS-Regel benötigen wir einen Selektor, der im Navigationsbereich nav das letzte Listenelement li auswählt.

Jede Pseudoklasse steht für ein besonderes Kriterium, das ein Element erfüllen muss, um selektiert zu werden. In der Regel wird eine Pseudoklasse mit einem anderen Selektor kombiniert (vgl. Beispiele in Abb. 3-40).

Pseudoklasse	Beispiel	Erläuterung des Beispiels
:last-of-type	li:last-of-type	Selektiert jedes `li`-Element, welches das letzte `li`-Element seines Elternelements ist.
:nth-of-type(n)	li:nth-of-type(2)	Selektiert jedes `li`-Element, welches das zweite `li`-Element seines Elternelements ist.
:link	a:link	Selektiert jedes `a`-Element, dessen Ziel noch nicht besucht worden ist.
:visited	a:visited	Selektiert jedes `a`-Element, dessen Ziel bereits besucht worden ist.
:hover	img:hover	Selektiert das `img`-Element, welches gerade mit dem Mauszeiger berührt wird.

Abb. 3-39: Auszug einiger Pseudoklassen

Eine Übersicht über alle Pseudoklassen bietet unter anderem w3schools.com (gegen Ende der Webseite).

Merke: Pseudoklassen

Aufgabe 3-8: Formatierung der Menüelemente II

Formatierungsvorgaben

Die folgenden Formatierungsvorgaben sollen für alle Webseiten unseres Webauftritts gelten:

HTML-Element	Formatierung
Das letzte Listenelement `li`, das sich innerhalb des Navigationsbereichs `nav` befindet.	Abstand rechts vom Element: 50 Pixel
Ein Hyperlink `a`, der sich innerhalb des Navigationsbereichs `nav` befindet und gerade mit dem Mauszeiger berührt wird.	Hintergrundfarbe: weiß (`white`) Schriftfarbe: dunkelgrün (`green`)

CSS-Eigenschaften

Abb. 3-40: Vorgaben zur Formatierung der Menüelemente

Vorschau

Abb. 3-41: Startseite index.html (Zwischenstand nach Aufgabe 3-8)

Lösung

CSS

nav li:last-of-type {
    margin-right: 50px;
}

nav a:hover {
    background-color: white;
    color: green;
}

Abb. 3-42: Ergänzung CSS-Datei styles.css