Die dritte Ebene
- Struktur durch CSS
- Die dritte Ebene
Auf älteren Browsern wie dem Internet Explorer 6 funktioniert das :hover-Ereignis nicht wie gewünscht, wodurch auch die Untermenüs nicht sichtbar werden.An dieser Stelle kommt das Suckerfish- Skript ins Spiel. Es ermittelt alle <id>-Tags und weist diesen bei einem onmouseover- Ereignis die ...
Auf älteren Browsern wie dem Internet Explorer 6 funktioniert das :hover-Ereignis nicht wie gewünscht, wodurch auch die Untermenüs nicht sichtbar werden.An dieser Stelle kommt das Suckerfish- Skript ins Spiel. Es ermittelt alle <id>-Tags und weist diesen bei einem onmouseover- Ereignis die Klasse sfhover zu und entfernt sie entsprechend wieder beim Ereignis onmouseout.
sfHover = function() {
var sfEls = document.
getElementById("navi").
getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.
replace(new RegExp(" sfhover\\b"),
"");
}
}
}
if (window.attachEvent) window.
attachEvent("onload", sfHover);Damit dieses Skript auch bei den älteren Browsern seine Wirkung entfalten kann, benötigen Sie eine entsprechende CSS-Definition für die neue Klasse sfhover. Erweitern Sie dazu die zuletzt getätigte Formatierung wie folgt:
#navi li:hover ul, #navi li.
sfhover ul {
..left: auto;
}Damit haben Sie das Grundkonstrukt geschaffen - wie Sie aber sicherlich bemerkt haben, liegen die Listenelemente der zweiten und dritten Stufe übereinander. Damit die Aufzählung der erfolgreichen Fußballer in einer eigenen Ebene aufklappt, sind einige weitere Formatierungen notwendig, die wir im Folgenden darstellen.
Die dritte Ebene
Damit die Drop-down-Listen der dritten Ebene auch richtig erscheinen, ist eine Formatierung der entsprechenden Aufzählung notwendig. Diese wird mit margin entsprechend in Position gebracht, wobei im Beispiel die Listelemente ein wenig nach oben verschoben werden - ohne diese Korrektur landet die Liste je nach Auswahl der anderen Rahmenparameter auf Höhe des nächsten Listenelementpunktes von Ebene 2.Unter Umständen müssen Sie den Parameter für Ihre Darstellung noch ein wenig feiner justieren. Mit dem letzten Wert korrigieren Sie die Position auf der x-Achse und verschieben das Fenster neben die Dropdown- Liste von Ebene 1.
#navi li ul ul {
..margin: -1em 0 0 10em;
}Zur Sicherstellung der Positionierung wird auch die Zeilenhöhe über alle Navigationselemente angepasst. Dies nehmen Sie über eine weitere Zeile innerhalb der allgemeinen Formatierung und der Angaben für die unsortierte Liste vor. Im Beispiel haben wir die Zeilenhöhe auf 1 gesetzt, alle anderen Werte innerhalb der Formatierung bleiben unverändert.
#navi, #navi ul {
...
..line-height: 1;
}Damit auch die Drop-down-Elemente der dritten Ebene erst bei Berührung aufklappen, erfolgt wie bereits in der zweistufigen Variante eine Verschiebung um 999em.
#navi li:hover ul ul, #navi li.
sfhover ul ul {
..left: -999em;
}Damit beim Auslösen des hover-Ereignisses auch die Liste zu sehen ist, verschaffen Sie auch der dritten Ebene wieder ihre Ausgangsposition. Erweitern Sie dazu einfach die Definition des ersten Beispiels.
#navi li:hover ul, #navi li li:
hover ul, #navi li.sfhover ul,
#navi li li.sfhover ul {
left: auto;
}Damit sind auch die Formatierungen für die dritte Ebene abgeschlossen und Sie können die Navigation in Betrieb nehmen.
Farbe ins Spiel
Eine einfache farbliche Formatierung sorgt für eine bessere Lesbarkeit und Darstellung der Menüs. In unseren Beispiel ist die Hintergrundfarbe blau und die Schrift wurde auf weiß gesetzt. Damit auch für den Betrachter klar ersichtlich ist, welchen Menüpunkt er gerade markiert, wird der hover-Effekt noch durch eine graue Hintergrundfarbe unterstützt. Die Definition der weißen Schriftfarbe ist in den allgemeinen Formatierungen zur Seite hinterlegt:
* {
color: white;
}Die Hintergrundfarbe der Listenelemente setzen Sie für über die allgemeinen Einstellungen der Listenelemente. Dazu erweitern Sie diese entsprechend um die Hintergrundfarbe und lassen die anderen Einträge unverändert.
#navi li {
...
background: blue;
}Für die farbliche Hervorhebung des Hintergrunds hinterlegen Sie das hover-Ereignis mit einer entsprechenden Formatierung.
#navi li:hover, #navi li.sfhover {
background: gray;
}
Vertikale Navigation
Passt die horizontale Ausrichtung nicht in das optische Konzept Ihrer Website, lässt sich die Navigation mit wenigen Anpassungen innerhalb der CSS-Formatierungen auch vertikal ausrichten.Die Anordnung der Elemente untereinander realisieren Sie über eine entsprechende Anpassung in der allgemeinen Formatierung und den CSS-Angaben zur Liste.
#navi, #navi ul {
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 11em;
}Neu hinzugekommen sind dabei die Festlegung der Breite auf 11em und der Testfluss links. Damit stehen die drei Elemente der ersten Hierarchieebene wieder untereinander. Die Anordnung der zweiten Ebene funktioniert erst mit der Einführung einer zusätzlichen Formatierung.
#navi li ul {
position: absolute;
margin-left : 11em;
margin-top : -1.35em;
left: -999em;
}Die restlichen Anpassungen sorgen für optische Korrekturen und eine fehlerfreie Darstellung über die verschiedenen Browser-Generationen hinweg.Die Darstellung als Block über das Anchor-Tag entfällt und wird bei der vertikalen Darstellung über das Anchor-Tag der Listelemente realisiert.
#navi li a {
width: 11em;
w\idth : 10em;
display : block;
text-decoration : none;
padding: 5px;
}Neu hinzugekommen ist in diesem Fall ein CSS-Hack für die korrekte Darstellung der Breite beim IE6:
w\idth : 10em;Die Formatierung des Listenelements hat sich auch etwas geändert.Die Positionierung erfolgt bei der vertikalen Anordnung relativ und es gibt eine explizite Höhe einer jeden Zeile.
#navi li {
position: relative;
float: left;
line-height: 1,25em;
margin-bottom: -1px;
background: blue;
width: 11em;
}Weiterhin ist für die Positionierung der Listenelemente auch die Anpassung der Formatierung #navi li ul notwendig.
#navi li ul {
position: absolute;
margin-left : 11em;
margin-top : -1.35em;
left: -999em;
}Mithilfe von margin-left und margin-top wird eine Positionierung der Drop-down- Menüs vorgenommen.Anstelle der Positionierung findet in der Formatierung von #navi li ul ul das Ausblenden der Untermenüs statt.
#navi li ul ul {
left: -999em;
}Beachtung finden
Mithilfe einer durchgängigen internen Verlinkung, einer suchmaschinenfreundlichen Navigation und themenbezogenen Sitemaps verschaffen Sie einzelnen Artikeln die richtige Aufmerksamkeit, sowohl bei Suchmaschinen als auch bei Ihren Besuchern.Die Umsetzung über CSS erlaubt dazu eine Darstellung der Inhalte auch bei abgeschalteter JavaScript-Ausführung, sofern es sich um einen aktuellen Browser handelt. Aber auch beim Einsatz von älteren Browsern besteht zumindest die Möglichkeit, über die einzelnen Elemente der Liste doch ans Ziel zu kommen.
