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" 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 abgesehen von display:block noch eine Breitenangabe zur Ausdehnung des Linkbereichs. Diese ist für den IE 6 im standardkompatiblen 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, ul#Navigation span, 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 spaetere Versionen korrigiert */
}
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, p a {
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, p a {
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 */
margin-bottom: -0.4em;
}
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 */
border-color: blue;
}
</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;
}
Ü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.
Dieses Beispiel funktioniert in modernen, auf dem Mozilla-Kern ("Gecko") basierenden Browsern zufriedenstellend. Im Internet Explorer sind rein auf CSS basierende dynamische Navigationsleisten grundsätzlich nicht möglich, da dieser Browser den Zustand :hover nur auf Links - genauer a-Elemente mit dem Attribut href - anwenden kann und diese nicht ineinander verschachtelt werden dürfen. Da der Internet Explorer aber auch die hier verwendeten Selektoren nicht interpretieren kann, stellt er dieses Beispiel wie das vorherige ohne Dynamik dar. Für andere moderne Browser sind Anpassungen erforderlich; so hat z.B. Opera 7 hier Probleme beim nachträglichen Überschreiben einmal definierter CSS-Eigenschaften, wenn float mit absoluter Positionierung kombiniert wird.
| |
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, p a {
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 */
margin-bottom: -0.4em;
}
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;
}
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 standardkompatiblen 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 */
border-color: blue;
}
Ü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 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 für Windows.
Anzeigebeispiel: So sieht's aus
<!--[if IE]><script type="text/javascript">
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "silver";
}
function ausblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "none";
}
window.onload=hoverIE;
</script><![endif]-->
Um unerwünschte Auswirkungen in anderen Browsern zu vermeiden, wird das Script über einen conditional comment nur dem Internet Explorer für Windows ab Version 5 zugänglich gemacht. Die Funktion hoverIE() wird vom Script mittels Event-Handler onload aufgerufen und erfordert keine weiteren Änderungen am HTML-Quelltext. Es durchsucht die in <div id="Navigation">...</div> 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).
Dieses relativ einfache Script ist speziell für eine Navigation mit zwei ineinander verschachtelten Listen konzipiert. Es prüft nicht, ob der jeweils dritte Knoten die Unternavigation enthält und berücksichtigt auch keine weitere Knoten. Falls Sie außer einfach verschachtelten Listen zusätzliche Elemente einfügen, müssen Sie das Script entsprechend anpassen.
Da die Interpretation von JavaScript nicht grundsätzlich vorausgesetzt werden kann und auch andere ältere Browser wie der Internet Explorer für Macintosh 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 |
|
© 2005 Impressum