4.4 Unternavigation

Der Navigation möchte ich in diesem Kapitel noch eine Unternavigation spendieren, so dass weitere Unterpunkte möglich sind. Dies ist vor allem für Seiten mit viel Inhalt interessant, da diese somit einfach gruppiert und dem Nutzer übersichtlich präsentiert werden können. Sollten Sie keine Unternavigation benötigen, so können Sie dieses Kapitel selbstverständlich auch überspringen.

HTML

Im HTML-Code sind für die Unternavigation der Seite lediglich kleinere Änderungen notwendig. Vergleichen Sie dazu einfach Quellcode 1 mit Ihrem aktuellen Stand.

Neu hinzugekommen sind die Zeilen 23 bis 28 und Zeile 47, wobei letztere einen Platzhalter für die Unternavigation darstellt. Im Fall dieser Seite ist dies der hellbraune Bereich direkt unter der Hauptnavigation.
Direkt unter den Navigationspunkten wird zum Beispiel in Zeile 23 ein div-Container mit einer darin befindlichen Liste an weiteren Anker-Tags erzeugt. Diese Elemente habe ich der Übersicht halber lediglich unter dem ersten Navigationspunkt platziert. Für alle Weiteren ist das Vorgehen identisch.

CSS

So wenig HTML-Quellcode erfordert dafür einige zusätzliche CSS-Eigenschaften, wie dies Quellcode 2 zeigt.

Zeilen 1 bis 10 sorgen dafür, dass die Unternavigation einen 115 Pixel hohen Platzhalter erhält. Dieser Wert ergibt sich aus der angegebenen Höhe von 105 Pixeln zuzüglich des 5 Pixel hohen Innenabstandes (padding) oben und unten.
Zeile 12 selektiert alle div-Container unterhalb eines li-Tags und natürlich innerhalb der navi-Id. Durch Zeile 19 werden alle div-Elemente weit außerhalb des sichtbaren Bereiches platziert. Somit sind zunächst alle Untermenüs unsichtbar, aber dennoch vorhanden.
Die Zeilen 23 bis 27 sorgen dafür, dass ein selektiertes Navigationselement von dem zuvor erstellten ausgefüllten Pfeil markiert werden. Der Menüpunkt, der die CSS-Klasse selected erhält, ist wie in diesem Kapitel der Menüpunkt 4 Umsetzung, durch einen Pfeil markiert. Wie und wann Sie die Klasse setzen hängt ganz von Ihrer weiteren Umsetzung ab. Sie könnten etwa eine neue Unterseite anlegen und die Klasse für den entsprechenden Menüpunkt setzen oder aber die Seite entscheidet dynamisch selbst darüber, welcher Menüpunkt gerade aktiv sein müsste, was beispielsweise durch PHP umsetzbar ist.
Durch die Zeilen 28 bis 32 wird das vom Nutzer selektierte div-Element für die Unternavigation eingeblendet, indem etwa die Position auf 0 Pixel gesetzt wird. Der Ausdruck !important sorgt dafür, dass zuvor definierte Eigenschaften von dieser überschrieben werden.
Ebenso soll die Unternavigation beim Mouseover eingeblendet werden, was aufgrund der Zeilen 33 bis 38 geschieht. Die Definition, dass ein li-Element ebenfalls wie ein Anker-Tag auf ein Mouseover durch :hover reagieren kann, funktioniert leider erst in aktuelleren Browsern. Der Internet Explorer 6 etwa unterstützt diese Definition nicht.
Alle weiteren Eigenschaften in den Zeilen 39 bis 56 sind notwendig um die Menüpunkte der Unternavigation zu formatieren. Um zu verstehen wofür diese genau gedacht sind hilft es Ihnen vermutlich am meisten, wenn Sie diese der Reihe nach hinzufügen und die Veränderungen der Seite beobachten.

JavaScript

Das Tolle an dieser Navigation, die sich erst beim Mouseover öffnet ist, dass diese vollständig ohne JavaScript auskommt. Das ist besonders dann wichtig, wenn beispielsweise ein Nutzer JavaScript in seinem Browser deaktiviert hat und somit nicht alle Unterseiten erreichen kann.
Die Ausnahme ist jedoch der Internet Explorer 6, der zwar mittlerweile extrem veraltet ist und daher nicht mehr verwendet werden sollte, aber dennoch auf älteren Rechnern oder größeren Firmen verbreitet ist, da diese Firmen etwa ihre gesamte Software auf diesen Browser optimiert haben. Da die Zahl der Nutzer dieses Browsers meines Erachtens nach stetig abnimmt, müssen Sie für sich entscheiden inwiefern Sie teilweise sehr umständliche Wege gehen um auch dort eine korrekte Darstellung der Webseite garantieren zu können. Ich denke hierbei spielt vor allem die Zielgruppe Ihrer Webseite eine große Rolle.
Quellcode 3 zeigt das JavaScript, durch das die Unternavigation auch im Internet Explorer 6 funktioniert. Diesen Codeschnipsel können Sie einfach im Kopfbereich zwischen den head-Tags platzieren. Um den Quellcode in den folgenden Kapiteln möglichst übersichtlich zu halten, wird dieser Code nicht dargestellt.

Da dies unter Umständen Ihr erster Kontakt mit JavaScript ist, möchte ich an dieser Stelle nicht zu sehr ins Detail gehen, da dazu einiges an Grundwissen vorausgesetzt wird. Wichtig für Sie zu wissen ist etwa, dass Sie durch Zeile 1 und 25 bewirken, dass der Quellcode dazwischen ausschließlich vom Internet Explorer 6 ausgeführt wird. In Zeile 4 definiere ich eine Funktion namens addHover. Bei einer Funktion handelt es sich zum Beispiel um Quellcode, den Sie stetig wiederverwenden.
In Zeile 6 werden alle Menüpunkte ausgelesen, indem das Dokument nach einem Element mit der Id navi mit sich darunter befindlichen li-Elementen durchsucht wird. In einer Schleife (Zeile 7 bis 17) werden diese einzelnen Elemente durchlaufen und deren sogenannte Eventhandler und dessen Verhalten definiert. Beim Eventhandler onmouseover (beim überfahren eines Navigationspunktes mit der Maus) soll beispielsweise die CSS-Klasse navihover hinzugefügt werden, die Sie zuvor der CSS-Datei wie in Quellcode 4 gezeigt hinzufügen.
Damit die Unternavigation auch wieder verschwindet wenn Sie den Menüpunkt mit der Maus verlassen, definiere ich in Zeile 13 des JavaScripts ein Verhalten für den Eventhandler onmouseout, bei dem die CSS-Klasse wieder entfernt werden soll.
Damit das JavaScript überhaupt ausgeführt werden kann, sorgen Zeile 19 bis 22 dafür, dass die Funktion initial beim Laden der Seite ausgeführt wird.

Ergebnis

Die in diesem Kapitel entstandene Unternavigation wird in Abbildung 1 beispielhaft dargestellt. In diesem Fall werden die Menüpunkte der Unternavigation beim Mouseover über den ersten Menüpunkt der Hauptnavigation dargestellt.