Vertikale Navigation

[ThomasG]

Hallo,

wer kann mir bitte helfen?
Ich habe eine HP für unseren Verein erstellt und möchte hier eine vertikale Navigation per JavaScript einbauen. Da diese HP inzwischen mehr als 60 HTML-Seiten beinhaltet, möchte ich die Struktur der Navigation auf allen Seiten gleich halten. Die maximale Anzahl an Seiten ist auch noch nicht erreicht.
Ich versuche schon seit einigen Monaten dies zu realisieren, aber ohne richtigen Erfolg. Wer kann mir den entsprechenden Tip zur Erstellung der Navigation geben?
Folgende Eigenschaften sollte die Navigation haben: Für meine Navigation benötige ich eine Hauptmenüebene und in Zukunft bis zu 4 Submenüebenen. Das ganze soll nur durch Klick auf die Buttons funktionieren. Auch den Buttons in der Hauptmenüebene soll eine HTML-Seite hinterlegt sein. Wenn ein Hauptmenü per klick geöffnet wird darf nur die nächste Submenüebene sichtbar werden und bei jedem weiteren Klick eine Ebene tiefer sichtbar werden (bei jedem Klick sollte die hinterlegte HTML-Seite erscheinen). Auch beim Klick zurück in der Ebenenstrucktur sollten die darunter liegenden Ebenen ausgeblendet werden. Wird eine paralelle Ebene angeklickt sollte sich die darunteliegenden Submenüebenen im alten Verzeichnisbaum schließen und im Neuem auf die Submenüebene erweitern. Das gleiche gilt auch für Hauptmenüs, wenn hier auf ein anderes Hauptmenü geklickt wird, soll sich das Alte komplett schließen und das neue erweitern mit der 1. Submenüebene.
Bislang habe ich die Navigation mit HTML und CSS alleine realisiert unter http://www.musikverein-hirschzell.de/index.html ist diese HP zu sehen (alleding befindet sich die HP derzeit noch im Aufbau und hat im letzten Menüpunkt nur 1 Submenüebene, was in Kürze geändert wird).

Für die Unterstützung zu meinem Problem wäre ich sehr dankbar.

Gruß
Thomas

[henman]

hallo ThomasG,

[...] Das ganze soll nur durch Klick auf die Buttons funktionieren.

das ist blöd, wenn jemand Javascript aus hat. Der wird die Unterpunkte nur erahnen können ;)

Auch den Buttons in der Hauptmenüebene soll eine HTML-Seite hinterlegt sein. Wenn ein Hauptmenü per klick geöffnet wird darf nur die nächste Submenüebene sichtbar werden und bei jedem weiteren Klick eine Ebene tiefer sichtbar werden (bei jedem Klick sollte die hinterlegte HTML-Seite erscheinen). Auch beim Klick zurück in der Ebenenstrucktur sollten die darunter liegenden Ebenen ausgeblendet werden. Wird eine paralelle Ebene angeklickt sollte sich die darunteliegenden Submenüebenen im alten Verzeichnisbaum schließen und im Neuem auf die Submenüebene erweitern. Das gleiche gilt auch für Hauptmenüs, wenn hier auf ein anderes Hauptmenü geklickt wird, soll sich das Alte komplett schließen und das neue erweitern mit der 1. Submenüebene.

Ich kann nur abraten, es nur durch Javascript zu ermöglichen. Es ist zwar netter Klimbim, doch trägt es rein gar nichts zum Inhalt bei und sollte deswegen nebensächlich sein.

Ansonsten schau dir mal Accordion von jQuery an.

grüße,
henman

[Der-Dennis]

Hallo Thomas,

Ich habe eine HP für unseren Verein erstellt und möchte hier eine vertikale Navigation per JavaScript einbauen.

warum mit JavaScript? Du hast die Navigation doch bisher auch mit HTML und CSS erstellt und - sehr löblich! - auch eine Liste dazu verwendet.

Da diese HP inzwischen mehr als 60 HTML-Seiten beinhaltet, möchte ich die Struktur der Navigation auf allen Seiten gleich halten. Die maximale Anzahl an Seiten ist auch noch nicht erreicht.

Meiner Meinung nach hat eine Navigation nichts direkt mit der Anzahl der verschiedenen Seiten zu tun. Oder möchtest Du jede Seite direkt in die Navigation einbauen? Das fände ich recht unübersichtlich.

Ich versuche schon seit einigen Monaten dies zu realisieren, aber ohne richtigen Erfolg. Wer kann mir den entsprechenden Tip zur Erstellung der Navigation geben?

Versuche doch erstmal, ob Du die Navigation nicht auch wie bisher mit einer HTML-Liste und CSS umsetzen kannst.
Hierzu kannst Du sicher <http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=verschachtelte Listen>, CSS-Kombinatoren und CSS-Pseuso-Klassen verwenden.

Gruß, Dennis