Webdesign-Tutorial: Dynamische Navigation mit JavaScript

Dieser Workshop erklärt, was man alles beim Erstellen einer dynamischen Navigation mit JavaScript beachten sollte. Dynamische Navigation erfordert teils umfangreiche JavaScript-Vorkenntnisse. Daher richtet sich dieses Tutorial an Webdesign-Profis.

Warum ist Javascript gefährlich? Eigentlich bin ich zwecks der Suchmaschinenoptimierung kein großer Fan von Javascript-Navigation. Das hat mehrere Gründe: Der automatische Linkchecker von Dreamweaver funktioniert nicht in Java-Script-Bereichen. Links müssen von Hand angepasst werden, wenn Sie Dateinamen ändern wollen. Zweitens kann Javascript in manchen Browsern ausgeschaltet werden; Besucher, die diese Einstellung in ihrem Browser verwenden, können auf Ihrer Website nicht mehr navigieren. Ihre Website ist dann vollkommen wertlos. Genauso wertlos ist sie, weil Google die Links in Ihrer Javascript-Aktionen nicht verfolgt. Beachten Sie das Tutorial "Suchmaschinenoptimierung".

Trotzdem gibt es einige Fälle, in denen der Einsatz von Javascript-Navigation durchaus sinnvoll zum Einsatz kommen kann. Neben den zahlreichen Nachteilen bietet Javascript-Navigation auch zwei Vorteile: Zum einen kann man wunderbar dynamische Effekte verwirklichen, die in reinem HTML unmöglich sind. Bei Kunden, die viel über das Design transferieren wollen, kann solch eine Javascript-Navigation punkten. Der zweite Vorteil betrifft die Usability der Seite. Gute Javascript-Navigation ist dynamisch: Unterpunkte werden hierarchisch ausgefahren. Die Zuordnungen der Seiten werden begreifbar, und der Platzanspruch ist trotz Erfüllung der Vorgabe, jede Seite von jeder aus erreichen zu können nicht so groß wie bei statischer HTML-Navigation.

Browserweiche Damit eine Javascript Navigation eine gute Usability aufweist, müssen Sie immer zweigleisig fahren. Die Navigation muss auch für User ohne Javascript-Unterstützung benutzbar sein. Sie können entweder eine Browserweiche in Javascript programmieren, oder verwenden die dynamische .js-Navigation in einer absolut positionierten <div>. Hinter der <div> liegt die statische HTML-Navigation versteckt. Bei der Browserweiche positionieren Sie im Kopfbereich Ihrer Index-Datei einen kleinen Javascript-Redirect-Befehl:

<script type="text/javascript">
<!-- top.location.href="index-js.html"; //-->
</script>

Falls Javascript beim betreffenden Benutzer ausgeschaltet ist, funktioniert diese Browserweiche nicht. Die Navigation muss auf dieser Seite als statisches HTML vorliegen. Ist Javascript beim Benutzer eingeschaltet, so leitet es weiter auf die Seite "index-js.html". Dort integrieren Sie die Navigation dynamisch als Javascript. Nachteil dieser Methode mittels Browserweiche ist, dass Sie jede Seite doppelt haben müssen: eine mit statischer HTML-Navigation und eine mit dynamischer Javascript-Navigation.

Freilich: man kann die Navigation ja in einen extra Frame legen, dann braucht man nur eine Navigationsseite doppelt. Beachten Sie jedoch, dass durch den Einsatz von Frames weitere Probleme entstehen: Sie benötigen einen Framecheck. Jeder Inhaltsframe muss "schauen", ob auch der Navigationsframe anwesend ist. Dazu gibt es noch Probleme die Regeln für gute Suchmaschinenoptimierung betreffend.

Javascript und HTML Ich ziehe aus diesen Gründen die zweite Methode vor. Sie besteht zum einen aus einem fertigen dynamischen Javascript-Menü (Beispielsweise cool menus von www.dhtmlcentral.com), zum anderen auf einer darunter versteckten statischen HTML-Navigation. Voraussetzung, um solch eine doppelte Navigation konstruieren zu können, ist die Möglichkeit der absoluten Positionierung der Javascript-Navigation. Nicht alle Javascript-Navigationen lassen sich aufgrund ihrer Programmierweise absolut positionieren. Verwenden Sie am besten Cool Menus, es ist sehr zuverlässig, einfach zu konfigurieren, bietet ein gutes Supportforum und läuft auf praktisch allen Browsern.

Legen Sie sich eine normale HTML-Seite an, in einer Zeile oben mit statischer HTML-Navigation versehen. Konfigurieren Sie die dynamischen Menüs unter Cool Menus Ihren Bedürfnissen entsprechend und positionieren sie die Ausgabe der Navigation absolut. Eine genaue Anleitung zu Cool Menus finden Sie unter
dhtmlcentral.com/projects/coolmenus/reference.asp?m=35. A
Dle zur Installation benötigten Dateien von Cool Menus finden Sie unter
www.dhtmlcentral.com/projects/coolmenus/coolmenus4_beta1_06.zip

Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesigner Downloadbereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf-Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop-Aktionen - und Homepagelayouts.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sie haben noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial? Mailen Sie uns Ihren Kommentar! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.