Verschachtelte Listen formatieren im HTML5
Nummerierten und auch Aufzählungslisten als verschachtelt
Zu diesem Thema Listen verschachteln existiert noch folgender Artikel: Verschachtelte Listen im HTML.
Wenn Sie eine Art von Listen in eine andere einfügen, bezeichnet man die innere Liste als verschachtelt. Das geht mit nummerierten und auch Aufzählungslisten (zusammen oder unabhängig). Es gibt auch eine andere Art von verschachtelter Liste.
Verschachtelte Listen sind vor allem bei einer Gliederung praktisch, die als nummerierte Liste strukturiert ist, wo man z.B. mehrere Abstufungen der Elemente haben will, oder für eine Navigation mit Untermenüs, die als Aufzählungslisten strukturiert sind. Sie können verschachtelte Listen auf verschiedene Weise formatieren, wie in den Beispielen demonstriert wird.
- Um die äußere Liste zu formatieren, tippen Sie
toplevel li {style _ regeln}ein, wobeitoplevelder Listentyp der äußeren Liste ist (z.B. ol, ul, dt) und style _ regeln die anzuwendenden Formatierungen sind. - Für die Liste der zweiten Ebene geben Sie
toplevel 2ndlevel li {style _ regeln}ein, wobeitoplevelzutoplevelaus Schritt 1 passen muss und2ndleveldie Listenart der Liste der zweiten Ebene ist. - Für die Liste der dritten Ebene geben Sie
top-level 2ndlevel 3rdlevel li {style _ regeln}ein, wobeitoplevelund2ndlevelzu den Werten aus den Schritten 1 bis 2 passen muss und3rdleveldie Listenart der dritten verschachtelten Liste ist. - In dieser Weise verfahren Sie mit allen verschachtelten Listen, die Sie formatieren wollen.
Hier sind vier verschachtelte Listen: eine im Listenelement Einführung, eine im Element Handlungsentwicklung, eine im Klimax-Element und eine, die fett hervorgehoben ist, innerhalb des Elements HTML5 - erforschen wir neue Elemente und Funktionen (das sich im Klimax-Element befindet).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<ol>
<li>Verschiedene Arten von Listen im HTML5
<ol>
<li>Nummerierte und Aufzählungslisten erstellen</li>
<li>Geordnete und ungeordnete Listen</li>
</ol>
</li>
<li>Verschiedene Arten von Listen im HTML5
<ol>
<li>Nummerierte und Aufzählungslisten erstellen</li>
<li>Geordnete und ungeordnete Listen</li>
<li>Listen verschachteln</li>
</ol>
</li>
<li>Verschiedene Arten von Listen im HTML5
<ol>
<li>HTML5 - erforschen wir neue Elemente und Funktionen
<ol>
<li>Nummerierte und Aufzählungslisten erstellen</li>
<li>Geordnete und ungeordnete Listen</li>
</ol>
</li>
<li>Listen verschachteln</li>
</ol>
</li>
<li>HTML5 Info - Wie alles begann</li>
<li>HTML5 Info - Die neuen Funktionen</li>
</ol>
</body>
</html>
Sie können jede Ebene einer verschachtelten Liste separat formatieren. Wenn Sie bei der Schriftgröße des Listentexts mit ems oder Prozentwerten arbeiten, vergessen Sie auf keinen Fall li li {font-size: 1em; } (oder 100% statt 1em), damit in den verschachtelten Listen nicht alles unleserlich schrumpft.
ol li {
font-size: .75em; list-style-type: upper-roman;
}
ol ol li {
list-style-type: upper-alpha;
}
ol ol ol li {
list-style-type: decimal;
}
li li {
font-size: 1em;
}
Die Listenelemente der ersten Stufe (ol li) haben römische Ziffern als Großbuchstaben. Die Listenelemente der zweiten Stufe (ol ol li) haben Großbuchstaben. Die Listenelemente der dritten Stufe (ol ol ol li) haben arabische Ziffern.
Dies ist ein weiteres Beispiel einer verschachtelten Liste. In diesem Fall ist ein Navigationsmenü als Aufzählungsliste mit zwei darin verschachtelten Aufzählungslisten für die Unternavigation strukturiert. Beachten Sie, dass jedes verschachtelte ul im übergeordneten Start-Tag <li> und End-Tag </li> enthalten ist. Mit ein wenig CSS können Sie die Navigation horizontal anlegen, die Untermenüs standardmäßig verstecken und sie abhängig von der Aktion des Besuchers zeigen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<nav role="navigation">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/html5-lernen.html">HTML5 Lernen</a>
<ul>
<li><a href="/html5-lernen/html5-info.html">HTML5 Info</a></li>
<li><a href="/html5-lernen/html5-text-gestalten.html">HTML5 Text gestalten</a></li>
</ul>
</li>
<li><a href="/html-lernen.html">HTML Lernen</a>
<ul>
<li><a href="/html-lernen/html-info.html">HTML Lernen</a></li>
<li><a href="/html-lernen/html-text-gestalten.html">HTML Text gestalten</a></li>
<li><a href="/html-lernen/html-multimedia-einbinden.html">HTML Multimedia einbinden</a></li>
</ul>
</li>
<li><a href="/autor">Autor</a></li>
</ul>
</nav>
</body>
</html>
Die Listenelemente HTML5 Lernen und HTML Lernen enthalten beide Untermenüs in verschachtelten uls, aber wegen des von mir angewendeten CSS wird keines davon standardmäßig sichtbar sein. In diesem Fall wird das Untermenü HTML Lernen dargestellt, weil ich mit der Maus über das li fahre, in dem sowohl der Support-Link als auch die damit zusammenhängende verschachtelte Liste des Untermenüs enthalten sind.
Verschachtelte Listen als Drop-down-Navigation einsetzen
Ein mögliches Einsatzgebiet von verschachtelten Listen ist die Strukturierung von Drop-down-Menüs in der Navigation. Sie können die Navigation mit CSS formatieren, damit jedes Untermenü nur dann gezeigt wird, wenn der Besucher mit dem Mauszeiger über das übergeordnete Listenelement fährt. Es verschwindet wieder, wenn der Cursor wegbewegt wird.
Sie können diesen Effekt auf verschiedene Weise implementieren, aber man muss dafür immer die Pseudoklasse :hover als Teil des Selektors, der das Untermenü aufdeckt, einsetzen. Hier ist ein solcher Ansatz, um die verschachtelten Listen standardmäßig zu verstecken und erst zu zeigen, wenn der Besucher mit der Maus darüberfährt:
/* Standardzustand der Untermenüs */
.nav li ul {
left: -9999em; /* verschiebt Untermenüs vom Bildschirm */
position: absolute;
z-index: 1000;
}
/* Standardzustand der Untermenüs, wenn Cursor über das Eltern-li fährt */
.nav li:hover ul {
display: block; /* für ältere IE-Versionen */
left: auto; /* bringt Untermenüs an vorgesehenen Platz zurück */
}
Sie brauchen mehr als dieses CSS, um das horizontale Layout zu implementieren, die Aufzählungszeichen von den Listenelementen zu entfernen und die Präsentation noch anderweitig Ihren Anforderungen anzupassen.
Sie können den Ansatz auch entsprechend für eine vertikale Navigation mit ausfahrenden Untermenüs nutzen, die seitlich erscheinen.