In den vorangegangenen Beispielen wurde für die Navigationsleiste eine 
Aufzählungsliste verwendet. Hiermit haben Sie nicht nur ein strukturelles Element, das dem Sinn einer Navigation, nämlich der Auflistung von Verweisen, recht gut entspricht, sondern auch gleich drei verschachtelte Elemente, die Sie über CSS formatieren können: <ul>, <li> und <a>.
Um eine einheitliche Darstellung zu erreichen, sind zunächst die unterschiedlichen Voreinstellungen der Browser für Listen zu überschreiben.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleisten</title>
<style type="text/css">
body, a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
}
ul#Navigation {
margin: 0; padding: 0;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0;
}
</style>
</head>
<body>
<h1>Navigationsleiste ...</h1>
<ul id="Navigation">
<li><a href="nav_definieren.htm">Beispiel 1</a></li>
<li><a href="nav_formatieren.htm">Beispiel 2</a></li>
<li><a href="nav_rollover.htm">Beispiel 3</a></li>
</ul>
</body>
</html>
Die Abstände werden für <ul> und <li> auf 0 gesetzt und das Aufzählungszeichen für <li> wird über list-style:none beseitigt. So erhalten Sie eine Darstellung der Links ohne erkennbare Listenformatierung, aufgrund der blockbildenden Eigenschaft der Listenpunkte jedoch untereinander angeordnet.
Im folgenden Beispiel werden nun die Abstände neu bestimmt, eine Breite für die Liste festgelegt sowie Rahmen und Farben hinzugefügt.
Anzeigebeispiel: So sieht's aus
ul#Navigation {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0.2em;
border: 1px solid gray;
background-color: #eee;
}
ul#Navigation a {
text-decoration: none; font-weight: bold;
color: maroon; background-color: #ccc;
}
ul#Navigation a:hover {
color: white; background-color: gray;
}
Die Zuweisung von Rahmen und Hintergrundfarben macht hier die Struktur sichtbar. Solche komplexen Listen-Formatierungen erfordern für den Internet Explorer (besonders für ältere Versionen) leider nicht selten Korrekturen über eine spezielle CSS-Browserweiche; in diesen Beispielen wird hierzu der "Star-HTML-Hack" für ältere Versionen und später auch der "Star-Plus-HTML-Hack" für den IE 7 verwendet.
Auch dem a-Element wurde eine Hintergrundfarbe zugewiesen und diese (sowie dazu passend die Schriftfarbe) über die Pseudoklasse :hover geändert. Hierdurch ergibt sich ein Rollover-Effekt, der so einfacher als mit JavaScript erzeugt werden kann. Es fehlt allerdings noch das typische Balken-Aussehen, da <a> als Inline-Element nur den für seinen Inhalt erforderlichen Raum einnimmt.
Um den Linkbereich auf das ganze li-Element auszuweiten und typische Rollover-Balken zu erhalten, werden die Links mit display:block definiert.
Anzeigebeispiel: So sieht's aus
ul#Navigation {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a { /* Breitenangaben nur fuer IE */
width: 100%;
w\idth: 8.8em;
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
Leider benötigt der Internet Explorer bis zur Version 6 abgesehen von display:block noch eine Breitenangabe zur Ausdehnung des Linkbereichs. Diese ist für den IE 6 im standardkonformen Modus und frühere Versionen entsprechend des verwendeten Box-Modells unterschiedlich angegeben.
Rahmen und Innenabstand von <li> sind hier dem Link zugewiesen, damit der Rollover-Effekt über den gesamten Hintergrund des Balkens geht. Über unterschiedliche Rahmenfarben ist hier auch ein räumlicher Effekt hinzugekommen.
Eine größere Anzahl von Menüpunkten in einer vertikal dargestellten Navigation ist aufgeteilt in Rubriken mit Zwischenüberschriften übersichtlicher. Hierzu werden im folgenden Beispiel h2-Elemente in die Liste eingefügt und ihnen gemeinsam mit den Links zunächst dieselben CSS-Eigenschaften zugewiesen.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit Überschriften</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
width: 10em;
margin: 0; padding: 0.2em 0.8em 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#Navigation h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: black; background-color: #eee;
}
</style>
</head>
<body>
<h1 id="Beispiel">Navigationsleiste mit Überschriften</h1>
<ul id="Navigation">
<li><h2>Rubrik 1</h2></li>
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><h2>Rubrik 2</h2></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 5</a></li>
<li><a href="#Beispiel">Seite 6</a></li>
<li><h2>Rubrik 3</h2></li>
<li><a href="#Beispiel">Seite 7</a></li>
<li><a href="#Beispiel">Seite 8</a></li>
<li><a href="#Beispiel">Seite 9</a></li>
</ul>
</body>
</html>
Da Überschriften von den Browsern meist größer und mit voreingestellten Außenabständen dargestellt werden, sind diese Eigenschaften für <h2> explizit gesetzt. Hierbei ist für margin-top ein größerer Abstand gewählt, um die Rubriken optisch voneinander zu trennen. Hervorgehoben werden die Überschriften hier farblich.
Neu in diesem Beispiel hinzugekommen ist auch, dass die aktuelle Seite nicht verlinkt wird. Dies erleichtert die Benutzbarkeit, da der Standort erkennbar ist und nicht mit einem (in diesem Fall ja nutzlosen) Link verwechselt werden kann. Hierzu wird der aktuelle Menüpunkt als <span> ausgezeichnet, dem dieselben CSS-Eigenschaften wie Verweisen zugewiesen werden, wenn diese mit der Maus überfahren werden; Sie können ihn - ausgehend von der Basisformatierung - auch noch deutlicher hervorheben.
Sie können eine Navigationsleiste mit wenigen Menüpunkten auch horizontal anordnen. Hierfür existieren zwei verschiedene Möglichkeiten mit unterschiedlichen Vor- und Nachteilen. Die einfachere Möglichkeit ist, die li-Elemente per display:inline darzustellen. Dies ermöglicht auch deren Zentrierung über eine auf das Eltern-Element angewandte Eigenschafts-/Wertkombination von text-align:center.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontale Navigationsleiste zentriert</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
margin: 0; padding: 0.8em;
text-align: center;
border: 1px solid black;
background-color: silver;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 0.4em; padding: 0;
}
ul#Navigation a, ul#Navigation span {
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
</head>
<body>
<h1 id="Beispiel">Horizontale Navigationsleiste zentriert</h1>
<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 5</a></li>
<li><a href="#Beispiel">Seite 6</a></li>
</ul>
</body>
</html>
Da inline angezeigten Elementen keine Breite zugewiesen werden kann, richtet sich diese nach dem enthaltenen Text (die für den Internet Explorer angegebene Breite von nur 1em dient zur Fehlerkorrektur in Version 5.0). Nutzen Sie diese Formatierungs-Möglichkeit, wenn die Menüpunkte unterschiedlich breit dargestellt werden bzw. nur soviel Raum wie ihr Inhalt einnehmen sollen.
Einen Nachteil hat diese Methode jedoch: Bei einem Umbruch der Navigationsleiste in zu kleinen Browserfenstern kommt es zu Überlagerungen. Dieser Effekt kann zwar auch bewusst zu gestalterischen Zwecken eingesetzt werden, verschlechtert allerdings die Nutzbarkeit. Achten Sie darauf, in den Menütexten keine oder nur geschützte Leerzeichen ( ) zu verwenden, damit bei einem Umbruch der Menüpunkt nicht geteilt wird.
Einheitliche Breiten der Menüpunkte unabhängig von deren Inhalten können Sie in einer horizontalen Navigationsleiste angeben, wenn Sie die CSS-Eigenschaft float verwenden. Sie können diese entweder <li> oder den hierin enthaltenen Elementen zuweisen, wobei dann li {display:inline} zu definieren ist. Letzteres ist aus verschiedenen Gründen günstiger.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontale Navigationsleiste mit gleichen Breiten</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
margin: 0; padding: 0.8em;
text-align: center;
border: 1px solid black;
background-color: silver;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 0; padding: 0;
}
ul#Navigation a, ul#Navigation span {
float: left; width: 6em;
margin: 0.4em; padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span { /* Korrektur fuer IE 5.x */
width: 8em;
w\idth: 6em;
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#Navigation div {
clear: left;
}
</style>
</head>
<body>
<h1 id="Beispiel">Horizontale Navigationsleiste mit gleichen Breiten</h1>
<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 5</a><div></div></li>
</ul>
</body>
</html>
Auch in diesem Beispiel wird display:inline für die li-Elemente benötigt, um Zeilenumbrüche zu verhindern. Da die enthaltenen Menüpunkte über float Eigenschaften von Block-Elementen erhalten, können ihnen auch eine Breite (width) und Außenabstände (margin) zugewiesen werden, ferner kommt es bei einem Umbruch nicht mehr zu Überlagerungen. Um den Elementfluss wieder herzustellen und in diesem Beispiel die Menüpunkte mit Hintergrund und Rahmen der Liste zu umschließen, ist ein Element mit der CSS-Eigenschaft clear innerhalb der Liste erforderlich. Hierzu wird ein leeres div-Element ohne semantische Bedeutung verwendet. Beim Internet Explorer funktioniert dies allerdings nur, solange kein Umbruch der Navigationsleiste erfolgt.
Sie können der Navigationsleiste ul#Navigation auch eine passende Breite zuweisen, um in zu kleinen Browserfenstern statt eines Umbruchs Scrollbalken anzubieten. Gemäß CSS 2.1 können Sie float hier auch problemlos ohne Angabe einer Breite verwenden, um Überlagerungen bei einem Umbruch zu verhindern.
Eine Navigation, die wie in obigem Beispiel mit Zwischenüberschriften versehen ist, wird in vielen Fällen keine sequenzielle Auflistung von Links enthalten, sondern eher verschiedenen Navigationsebenen entsprechen. Die Überschriften stellen in diesem Fall die Hauptmenüpunkte dar und können selbst auch mit Übersichtsseiten für die jeweilige Rubrik verlinkt sein. Eine verschachtelte Liste eignet sich zur logischen Abbildung dieser Struktur jedoch besser.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit mehreren Ebenen</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#Navigation li ul {
margin: 0 0 0 1em; padding: 0;
}
ul#Navigation li ul li {
margin: 0.1em 0;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html ul#Navigation li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
</head>
<body>
<h1 id="Beispiel">Mehrere Navigationsebenen</h1>
<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
</body>
</html>
In das zweite <li>-Element ist hier eine weitere Liste eingefügt, da <ul> selbst keine anderen Elemente als <li> enthalten darf.
Über die Nachkommen-Selektoren ul#Navigation li ul und ul#Navigation li ul li werden die CSS-Eigenschaften für die so verschachtelte Liste dahingehend geändert, dass die Menüpunkte dieser zweiten Ebene eingerückt und entsprechend schmaler sind und einen geringeren Abstand zueinander sowie zum dazugehörigen Menüpunkt der ersten Ebene aufweisen. Es sind natürlich auch andere CSS-Formatierungen möglich, um diese Struktur zu visualisieren.
Selbst ohne CSS wird die Struktur von verschachtelten Listen über die Browser-Voreinstellungen sehr gut deutlich, wie dieses Beispiel zeigt.
Eine verschachtelte Liste lässt sich auch geteilt darstellen, sodass die Menüpunkte der ersten Ebene horizontal in einer Reihe und die der zweiten Ebene vertikal passend darunter angeordnet werden. Dazu ist es erforderlich, die li-Elemente der ersten Ebene per float nebeneinander anzuordnen und ihnen position:relative zuzuweisen, damit deren Positionen als Bezug für die über position:absolute aus dem Elementenfluss genommenen Listenpunkte der zweiten Ebene genutzt werden.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Geteilte Navigationsleisten</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
width: 8.6em;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.7em; left: -0.4em;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span { /* nur fuer IE erforderlich */
width: 100%;
w\idth: 6.4em;
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
</style>
</head>
<body>
<h1 id="Beispiel">Geteilte Navigationsleisten</h1>
<div id="Rahmen"><ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a id="aktuell" href="#Beispiel">Seite 4</a>
<ul>
<li><a href="#Beispiel">Seite 4a</a></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 4c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 5</a></li>
</ul><div></div></div>
</body>
</html>
Bei dieser Navigationsleiste muss ein Umbruch verhindert werden, um die richtige Reihenfolge der angezeigten Menüpunkte zu gewährleisten. Dazu ist eine ausreichend große Breite anzugeben, die allerdings nicht der Liste selbst zugewiesen werden sollte, da dies in einigen Browsern zu einer fehlerhaften Darstellung führt. Daher wird ein zusätzliches Element (div#Rahmen) um die Navigationsleiste gesetzt, welches auch die Definitionen für den Rahmen und die Hintergrundfarbe übernimmt. Als Element ohne semantische Bedeutung hat es ohne CSS keine Auswirkung auf die Darstellung. Da die Listenpunkte über float aus dem Elementfluss genommen sind, muss ein zusätzliches, innerhalb des Rahmens notiertes Element mit der CSS-Eigenschaft clear den Elementfluss wieder herstellen. Auch hierzu wird ein leeres div-Element (<div></div>) verwendet.
Die verschachtelten Listen der zweiten Ebene werden über den Nachkommen-Selektor ul#Navigation li ul absolut unterhalb des dazugehörigen Listenpunktes positioniert. Für die Listenpunkte der zweiten Ebene wird über den Nachkommen-Selektor ul#Navigation li ul li die Eigenschaft float aufgehoben.
In diesem Beispiel ist ein Menüpunkt der zweiten Ebene als aktuelle Seite nicht verlinkt, sondern mit dem Element <span> ausgezeichnet und über CSS gesondert formatiert. Um auch den dazugehörigen Menüpunkt der ersten Ebene über CSS hervorheben zu können, wird für diesen die id="aktuell" angegeben.
Moderne Browser ermöglichen auch, die Navigation der zweiten Ebene dynamisch einzublenden. Hierzu ist nur eine kleine Ergänzung im Stylesheet erforderlich:
Anzeigebeispiel: So sieht's aus
/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul#Navigation li>ul {
display: none; top: 1.6em;
}
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
display: block;
}
/* Workaround fuer den IE 7 */
*:first-child+html ul#Navigation ul {
background-color:silver; padding-bottom:0.4em;
}
Über den Kind-Selektor li>ul werden die Listen der zweiten Ebene zunächst mittels display:none ausgeblendet. Beim Überfahren mit der Maus werden sie über den Selektor ul#Navigation li:hover>ul mit display:block wieder angezeigt; ebenso die aktuell ausgewählte Liste über den komplexen Selektor ul#Navigation li>a#aktuell+ul, der nur die ul-Liste anspricht, die auf den Link a#aktuell folgt, welcher Kindelement eines li in der ul#Navigation ist. Damit die beim Überfahren mit der Maus eingeblendete Liste beim Ansteuern ihres ersten Menüpunktes nicht wieder ausgeblendet wird, muss sie etwas höher positioniert werden, sodass sie den Listenpunkt der ersten Ebene überlappt. Wenn Sie genau hinsehen, bemerken Sie hier einen etwas geringeren Abstand als den über margin für die verschachtelten Listenpunkte angegebenen.
Damit dieses Beispiel auch bei mehreren Untermenüpunkten im Internet Explorer 7 noch funktioniert, ist für den IE 7 eine Hintergrundfarbe für die Unternavigation angegeben.
Dieses Beispiel funktioniert in modernen Browsern zufriedenstellend. Im Internet Explorer bis zur Version 6 und älteren Browsern sind rein auf CSS basierende dynamische Navigationsleisten grundsätzlich nicht möglich, da sie den Zustand :hover nur auf Links - genauer a-Elemente mit dem Attribut href - anwenden können und diese nicht ineinander verschachtelt werden dürfen. Da diese Browser aber auch die hier verwendeten Selektoren nicht interpretieren können, stellen sie dieses Beispiel wie das vorherige ohne Dynamik dar.
Dieses Beispiel basiert ebenfalls auf der obigen geteilt dargestellten verschachtelten Liste. Die Unternavigation ist hier ausgeblendet und wird allen modernen Browsern beim Überfahren mit der Maus angezeigt. Sofern Sie die Menüpunkte der ersten Ebene mit Übersichtsseiten für ältere Browser verlinken und damit auch einer Tastatursteuerung zugänglich machen, ist eine solche dynamische Navigationsleiste auch praktisch einsetzbar. Die Übersichtsseiten könnten neben Verweisen auf die Menüpunkte der weiteren Ebenen auch eine Einleitung zur jeweiligen Rubrik enthalten.
Anzeigebeispiel: So sieht's aus
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
Über den einfachen Nachkommen-Selektor ul#Navigation li ul wird die Unternavigation hier für alle nicht ganz veralteten Browser ausgeblendet. Eingeblendet wird sie dagegen nur noch von modernen Browsern beim Überfahren mit der Maus. Benutzer älterer oder diesbezüglich fehlerhafter Browser können jedoch über den Umweg der in der Hauptnavigation verlinkten Übersichtsseiten auch zum Ziel gelangen.
Die Breite der Menüpunkte ist hier nicht für <li> angegeben, sondern für die hierin enthaltenen Elemente. Diese nach CSS 2.1 gültige Möglichkeit, float ohne Angabe von width zu verwenden, beseitigt auch die fehlerhafte Darstellung des vorherigen Beispiels in Opera 7. Für den Internet Explorer 5.x ist die Breite nach dem fehlerhaften Microsoft-Boxmodell angegeben.
Testen Sie eine solche Navigationsleiste in möglichst vielen Browsern, da die hier verwendete Methode einige Browser überfordern könnte!
Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über 
JavaScript. Es ist jedoch sinnvoll, dies mit der hier gezeigten Möglichkeit zu kombinieren.
Die folgende, im <head>-Bereich des obigen Beispiels eingefügte JavaScript-Funktion ermöglicht die dynamische Anzeige der Unternavigation auch dem Internet Explorer 5 und 6.
Anzeigebeispiel: So sieht's aus
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
Um unerwünschte Auswirkungen in anderen Browsern zu vermeiden, wird das Script über eine Browserweiche nur dem Internet Explorer (auch der Macintosh-Version) zugänglich gemacht. Die Funktion hoverIE wird vom Script mittels Event-Handler onload aufgerufen und erfordert keine weiteren Änderungen am HTML-Quelltext. Das Script durchsucht die in der ul id="Navigation" enthaltenen Knoten und blendet die hierin verschachtelten ul-Elemente über die CSS-Eigenschaft display beim Überfahren mit der Maus (onmouseover) ein bzw. beim Verlassen (onmouseout) wieder aus. Dies erfordert beim Internet Explorer jedoch zusätzlich eine Änderung der Hintergrundfarbe (backgroundColor).
Um den Internet Explorer 7 von diesem Script auszuschließen, können Sie es in einen conditional comment (<!--[if lt IE 7]> <![endif]-->) setzen, wenn Sie auf die Unterstützung der alten Macintosh-Version verzichten.
Da die Interpretation von JavaScript nicht grundsätzlich vorausgesetzt werden kann und auch andere ältere Browser die Unternavigation nicht darstellen, ist diese Funktionalität nur ergänzend nutzbar und Sie sollten auf die beim obigen Beispiel angesprochene alternative Verlinkung nicht verzichten.
|
| |
 |
CSS-Browserweichen zum Ausschließen älterer Browser
|
 |
Fixe Bereiche mit CSS-basierten Layouts
|
 SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts |
|
© 2007 Impressum