Aufklappmeüs und wechselnder Content ohne Script?

[AgofEx]

Hallo zusammen,

bin (fast) völliger Neuling im Webdesign, arbeite mich jetzt seit etwa drei Wochen in die Materie ein.

Für ein erstes Projekt stehe ich for der Frage, wie ich am einfachsten folgendes realisiere:

• ca. 12 Seiten Umfang
• Grundgerüst aus Header, Nav, Aside und Footer immer gleich
• Section-Content abhängig vom ausgewählten Menüpunkt

Soweit ganz easy, denke ich. Es gibt ja eine Menge Varianten, um die konstanten HTML-Teile zu inkludieren, nur sind meine Menüs aufklappbar, und ich möchte beim Laden des neuen Content nicht per include die statischen Teile neu laden, weil sie ja sonst wieder zusammenklappen würden. Das Navigationsmenü soll natürlich so erhalten bleiben, wie der Nutzer es eingestellt hat.

Gibt es hierzu eine ganz einfache HTML-Lösung, oder muss ich da mit Scripten, Variablen etc. arbeiten?

Dank vorab!

[beatovich]

hallo

Gibt es hierzu eine ganz einfache HTML-Lösung, oder muss ich da mit Scripten, Variablen etc. arbeiten?

Nein. Ja!

Wenn du etwa schon nur die Navigation betrachtest, bemerkst du dass der Eintrag, der die aktuelle Seite referenziert, seiner Funktion enthoben sein muss.

Das heisst jetzt aber nicht, dass du nicht einfach statischen Inhalt ausliefern kannst. Es heisst, dass man onload mit Javascript eine gewisse Optimierung vornehmen muss.

[AgofEx]

Nach dem klaren "Nein. Ja!" versteh ich nur noch Bahnhof. :)

[beatovich]

hallo

Nach dem klaren "Nein. Ja!" versteh ich nur noch Bahnhof. :)

Dann halt auch in chinesisch.

Du forderst die Seite example.org/dies an.

Und lieferst dabei als statischen Kontent dieses Schnippsel

<nav>
  <ul>
    <li><a href="dies">Dieses</a>
    <li><a href="jenes">Jenes</a>
  </ul>
</nav>

Welcher der Links braucht eine Spezialbehandlung?

[AgofEx]

Nach dem, was du oben schreibst, der erste Link, denn dort soll nicht viel passieren. Tatsächlich müsste auf den Seitenanfang gesprungen, die Seite aber nicht neu geladen werden. Das könnte man sicher per Script abhängig von der momentan offenen Seite lösen.

Nach meinem Verständnis brauche ich aber auch für die neuen Seiten eine Lösung, die ich bislang nicht kenne. Ich möchte ja, dass mein Menü so bleibt, wie es ist, kann also das Menü nicht per include in alle Content-Seiten einbeziehen, oder?

Vor 15 Jahren hätte ich bei sowas an Frames gedacht, aber das gibt es ja nicht mehr und war schon immer verpönt. Der Grundgedanke von Frames ist aber geanu das, was ich hier brauchen könnte.

[JürgenB]

Hallo,

wie includest du dein Menü?

Gruß
Jürgen

[beatovich]

hallo

Nach dem, was du oben schreibst, der erste Link, denn dort soll nicht viel passieren. Tatsächlich müsste auf den Seitenanfang gesprungen, die Seite aber nicht neu geladen werden. Das könnte man sicher per Script abhängig von der momentan offenen Seite lösen.

Nach meinem Verständnis brauche ich aber auch für die neuen Seiten eine Lösung, die ich bislang nicht kenne. Ich möchte ja, dass mein Menü so bleibt, wie es ist, kann also das Menü nicht per include in alle Content-Seiten einbeziehen, oder?

Vor 15 Jahren hätte ich bei sowas an Frames gedacht, aber das gibt es ja nicht mehr und war schon immer verpönt. Der Grundgedanke von Frames ist aber geanu das, was ich hier brauchen könnte.

Du kannst natürlich via xmlHttpRequest die Hauptinhalte ändern. Das ist aber nicht besonders günstig, denn da verlierst du ja den Bezug von URI zu Hauptinhalt, und für des webweite Referenzieren ist das auch nicht toll.

Um nun den GUI Zustand zwischen URI Requests zu merken, musst du alles, was gemerkt werden soll, speichern. Sofern du keine Sessions einführen willst, bleibt dir da nur die Möglichkeit, mit Javascript ein Cookie ständig zu aktualisieren und beim Laden der Seite zu lesen.

Sobald das nicht mehr reicht, bist du zu dynamischer Seitenerzeugung auf dem Server gezwungen.

[Gunnar Bittersmann]

@@AgofEx

• ca. 12 Seiten Umfang

nur sind meine Menüs aufklappbar

Warum?

Bei nur 12 Seiten zwei (oder gar mehr?) Hierarchie-Ebenen in der Navigation, mit Aufklappmenü? Warum das?

und ich möchte beim Laden des neuen Content nicht per include die statischen Teile neu laden, weil sie ja sonst wieder zusammenklappen würden. Das Navigationsmenü soll natürlich so erhalten bleiben, wie der Nutzer es eingestellt hat.

Warum?

Wenn der Nutzer auf die neue Seite kommt, was interessiert sie: der Seiteninhalt oder das Navigationsmenü? Eben, das Navigationsmenü sollte zugeklappt sein.

Du willst das Navigationsmenü als Breadcrumb-Navigation missbrauchen?

LLAP 🖖

[beatovich]

hallo

Bei nur 12 Seiten zwei (oder gar mehr?) Hierarchie-Ebenen in der Navigation, mit Aufklappmenü? Warum das?

Wo liest du das heraus?

[Gunnar Bittersmann]

@@beatovich

Bei nur 12 Seiten zwei (oder gar mehr?) Hierarchie-Ebenen in der Navigation, mit Aufklappmenü? Warum das?

Wo liest du das heraus?

Aus dem OP. Gäbe es nur eine Hierarchie-Ebene, macht ja ein Aufklappmenü wenig Sinn.

LLAP 🖖

[beatovich]

hallo

@@beatovich

Bei nur 12 Seiten zwei (oder gar mehr?) Hierarchie-Ebenen in der Navigation, mit Aufklappmenü? Warum das?

Wo liest du das heraus?

Aus dem OP. Gäbe es nur eine Hierarchie-Ebene, macht ja ein Aufklappmenü wenig Sinn.

Beispiel

Home | Articles | Contact | Impressum

Ich kann hier bereits den Bedarf nach einer mindestens 2. Ebene erkennen. Aber der Sinn, diese 2. Ebene permanent anzuzeigen erschliesst sich mir nicht.

Je nach Natur der Articles (handelt es sich um eine logische Serie?) kann es auch Sinn machen, nur dann die Liste der Articles offen zu präsentieren, wenn man sich innerhalb der Serie befindet.

Home | Articles | Contact | Impressum

Intro | First Sighting | In Debth | Results | Further Reading |

[marctrix]

Hej Gunnar,

und ich möchte beim Laden des neuen Content nicht per include die statischen Teile neu laden, weil sie ja sonst wieder zusammenklappen würden. Das Navigationsmenü soll natürlich so erhalten bleiben, wie der Nutzer es eingestellt hat.

Warum?

Würde mich auch interessieren.

Wenn ein Nutzer die Darstellung des Menüs bewusst konfiguriert hat, macht es Sinn, dass die Konfiguration erhalten bleibt.

Aber in welchen Fällen macht das für den Nutzer Sinn?

Wenn der Nutzer auf die neue Seite kommt, was interessiert sie: der Seiteninhalt oder das Navigationsmenü? Eben, das Navigationsmenü sollte zugeklappt sein.

Du willst das Navigationsmenü als Breadcrumb-Navigation missbrauchen?

Wenn es um die klassischen Menüs geht, in denen der seitenbaum aufgeklappt war, hat der ja wesentlich mehr Informationen bereit gestellt als nur den Pfad zum aktuellen Dokument. Zum Beispiel die Namen von Dokumenten die sich in derselben Rubrik befinden, wie das gerade geöffnete Dokument. Diese Menüs waren hilfreich und ich vermisse sie sehr.

Aber da macht es keinen Sinn den Zustand einer Seite zu einer anderen zu „retten“…

Marc

[AgofEx]

Vielen Dank für die Rückmeldungen!

Ich versuche ein wenig ausführlicher zu beschreiben, was ich möchte.

Es handelt sich um eine Hilfe-Seite, also grundsätzlich nicht viel mehr als ein HTML-Dokument mit verschiedenen Sprungpunkten, welche durch ein Menü auf der linken Seite erreichbar sein sollen. Das ganze ist halt nur sehr umfangreich, weshalb ich es nicht in eine Seite packen möchte. Es kommen nämlich auch Bilder und Diagramme rein, und die möchte ich nicht auf einmal laden lassen.

Es sind 14 Hauptthemen (12 war eine Schätzung, jetzt habe ich nachgezählt), und es existieren vier Hierarchieebenen. Der komplett ausgeklappte Menübaum ist nicht sehr übersichtlich und passt natürlich auch auf keine Seite. Deswegen würde ich unausgeklappt starten wollen.

Wenn der User jetzt etwas bestimmtes verstehen möchte, kann es sein, dass er in zwei bis drei Hauptbereichen gleichzeitig sucht und hin-und-herspringt. Dabei wäre es natürlich inakzeptabel, wenn seine Ansicht des Menüs zusammenklappen würde, nur weil der den Hauptthemenbereich, sprich die Seite gewechselt hat.

Wäre das Menü statisch, so würde ich einfach 14 HTML-Seiten mit Content machen und den unveränderlichen Teil includen (Auf welche Art, hätte ich auch noch nicht entschieden, aber diese Variante fällt ja ohnehin weg.). Da es aber eben wichtig ist, wie sich das Menü verhält, halte ich mittlerweile den umgekehrten Ansatz für sinnvoller. Es gibt die Basisseite mit Menü, von der aus der Content-Teil dynamisch nachgeladen wird. Was wäre hierfür der beste Ansatz? Einfach gleich PHP? Und wenn ja, ist das dann so simpel wie das angeklickte Menü-Item in eine Variable oder auch zwei (Seite und Sprunganker) zu packen und im Content-Bereich per PHP das richtige File anzuzeigen und an die Marke zu springen? Würde mich dann immer noch viel Arbeit kosten, mir die entsprechenden Kenntnisse anzulesen, aber dann hätte ich zumindest schon mal einen Plan. Nur löst das mein Problem überhaupt schon? Lässt sich der Content-Teil so einfach neu anzeigen, ohne die Seite insgesamt zu refreshen?

[marctrix]

Hej AgofEx,

auch in der Wikipedia werden durchaus umfangreiche und komplexe Inhalte in ein einzelnes Dokument gepackt.

Bilder werden klein eingebunden und Ladezeiten bleiben so im akzeptablen Bereich.

Über wie viel Inhalt sprechen wir denn?

Ist Wikipedia für dich als „Vorbild“ geeignet?

Marc

[AgofEx]

Ich kenne keinen Wikipedia-Artikel, der annähernd so lang ist wie mein Help-File, aber Text ist sicher kein Argument, was Ladezeiten angeht. Ich kann den Umfang der Bilder noch nicht einschätzen, denn das File wird auch über die Zeit wachsen. Es werden aber auf jeden Fall Hunderte, und aus Usability-Gründen möchte ich die von vornherein in einer Größe einbinden, welche es ermöglicht das im Text Erklärte bildlich zu unterstreichen, ohne dass man es noch anklicken und vergrößern muss.

Alles in einer Seite ist ja das, was ich momentan aufgesetzt habe. Das funktioniert auch prima, noch… Ich möchte einfach am liebsten eine Struktur wählen, die ich nicht irgendwann umschmeißen muss, weil es ausufert.

[beatovich]

hallo

Ich kenne keinen Wikipedia-Artikel, der annähernd so lang ist wie mein Help-File, aber Text ist sicher kein Argument, was Ladezeiten angeht. Ich kann den Umfang der Bilder noch nicht einschätzen, denn das File wird auch über die Zeit wachsen. Es werden aber auf jeden Fall Hunderte, und aus Usability-Gründen möchte ich die von vornherein in einer Größe einbinden, welche es ermöglicht das im Text Erklärte bildlich zu unterstreichen, ohne dass man es noch anklicken und vergrößern muss.

Alles in einer Seite ist ja das, was ich momentan aufgesetzt habe. Das funktioniert auch prima, noch… Ich möchte einfach am liebsten eine Struktur wählen, die ich nicht irgendwann umschmeißen muss, weil es ausufert.

• Dann nutze eine DB für deine Hilfe,
• tagge deine Hilfetexte
• und zeige sie per Formularabfrage an.
• Nutze Query-Strings um Abfragen zu verlinken.

[AgofEx]

• Dann nutze eine DB für deine Hilfe,

Ok, also komplettes HTML als String in eine MySQL-DB z. B.?

• tagge deine Hilfetexte

Ist das ein Insiderbegriff für etwas wichtiges? Die Seiten enthalten natürlich jede Menge Tags, strukturierende, Links zu Bilder, Sprünge vor allem.

• und zeige sie per Formularabfrage an.

Was genau ist damit gemeint? Irgendwas mit JavaScript, oder wäre die einzelnen Menü-Items als HTML-Formular zu übergeben???

• Nutze Query-Strings um Abfragen zu verlinken.

Ob Query-String oder POST, lade ich damit nicht immer irgendeine Seite neu, kollabiert da nicht meine Zieharmonika?

Das klingt für mich umständlich insgesamt. Wäre es da nicht einfacher, doch 14 HTML-Seiten zu haben, und den Zustand des Menüs per Session und JavaScript zu verwalten? Nicht dass ich wüsste, wie das geht, aber als Weg erscheint es mir geradlieniger.

[beatovich]

hallo

• Dann nutze eine DB für deine Hilfe, Ok, also komplettes HTML als String in eine MySQL-DB z. B.?

MySQL ist eine Méglichkeit. Du kannst jedoch deine Hilfeartikel weiterhin als statische Texte behalten, und lediglich die Metadaten in einer DB verwalten.

• tagge deine Hilfetexte Ist das ein Insiderbegriff für etwas wichtiges? Die Seiten enthalten natürlich jede Menge Tags, strukturierende, Links zu Bilder, Sprünge vor allem.

taggen bezeichnet, einen Artikel verschiedenen Rubriken zuzuorden.

• und zeige sie per Formularabfrage an. Was genau ist damit gemeint? Irgendwas mit JavaScript, oder wäre die einzelnen Menü-Items als HTML-Formular zu übergeben???

Dadurch dass deine Artikel Rubriken angehören, lassen sich diese Abfragen. Auch in diesem Forum werden Tags angeboten und stehen in der Forumsuche zur Verfügung.

• Nutze Query-Strings um Abfragen zu verlinken. Ob Query-String oder POST, lade ich damit nicht immer irgendeine Seite neu, kollabiert da nicht meine Zieharmonika?

Ein Querystring kann verlinkt werden!

Ich würde erst mal vernünftige Prioritäten setzen. Ein Hilfesystem muss hilfreich sein (durchsuchbar, referenzierbar).

[AgofEx]

Ich würde erst mal vernünftige Prioritäten setzen. Ein Hilfesystem muss hilfreich sein (durchsuchbar, referenzierbar).

Auf Tags verzichte ich. Die klare Struktur sollte ausreichend sein, und gerade deswegen ist mir das hierarchische Menü wichtig. Es ist ja kein Blog oder Forum, in denen der Content relativ unsortiert ist.

Nochmal meine Frage: ist es nicht vielleicht doch einfacher, 14 HTML-Seiten zu haben und das Menü so zu umskripten, sodass es trotz Neuladens seinen Ausklappstatus einfach beibehält? Es gibt doch zu jedem Aufklappelement das open-Attribut. Wäre es ein Ansatz, dieses Attribut durch eingeschobenes PHP und per Session zu verwalten? Mann braucht doch einfach nur ein Boolean für jede Summary-Zeile. Das hinzuwurschteln, würde ich mir noch irgendwie zutrauen. Deine Vorschläge sind sicher gut gemeint und vielleicht auch viel besser, nur leider weit über meinem Horizont, beatovich.

[Matthias Apsel]

Hallo AgofEx,

Du könntest eine Navigation per include in jedes Dokument laden.

<?php if(strpos($_SERVER['SCRIPT_NAME'], 'index.php')) : ?>

Navigation für die index.php

<?php elseif(strpos($_SERVER['SCRIPT_NAME'], 'forum.php')) : ?>

Navigation für die forum.php

…

<?php endif; ?>

Du bräuchtest nur die Unterschiede in die bedingten Code-Abschnitte einzufügen.

Bis demnächst
Matthias

[AgofEx]

Danke hierfür, werde mal versuchen, diesen Ansatz zu verstehen und dann umzusetzen!

[marctrix]

Hej AgofEx,

Ich würde erst mal vernünftige Prioritäten setzen. Ein Hilfesystem muss hilfreich sein (durchsuchbar, referenzierbar).

Sehr vernünftiger Vorschlag von @beatovich

Auf Tags verzichte ich. Die klare Struktur sollte ausreichend sein,

Irrtum 😉

Jede Information sollte auf mindestens zwei Wegen erreichbar sein. Die Methode, mit der die meisten zurecht kommen, kann immer noch eine große Gruppe von Menschen vollkommen ausschließen. Noch viel wahrscheinlicher ist, das manche Menschen einen anderen Zugang schlicht bequemer finden.

und gerade deswegen ist mir das hierarchische Menü wichtig. Es ist ja kein Blog oder Forum, in denen der Content relativ unsortiert ist.

Aber die Sortierung übernehmen ja nicht die Besucher nach ihrem Verständnis. Auch wissen sie nicht einmal, was alles drin steht.

Woher sollen sie also wissen, wo du eine bestimmte Information untergebracht hast?

Ist es dir nicht sogar schon mal passiert, dass du nach einer Weile (vor allem wenn ein Informationsangebot wächst) selber die Inhalte anders sortieren würdest?

Oder in deinem Kleiderschrank?

Andere würden die Infos, die du einsortiert hast nur finden, wenn deine Wegweiser ausgezeichnet sind und alle beachtet werden. Wie mühsam! Und wie viel einfacher wäre es, einen Suchbegriff eingeben zu können oder ein Stichwort in einem Verzeichnis zu finden.

Marc

[marctrix]

Hej AgofEx,

Ich kenne keinen Wikipedia-Artikel, der annähernd so lang ist wie mein Help-File, aber Text ist sicher kein Argument, was Ladezeiten angeht. Ich kann den Umfang der Bilder noch nicht einschätzen, denn das File wird auch über die Zeit wachsen. Es werden aber auf jeden Fall Hunderte

Das klingt eher nach einer kompletten Website, da hast du recht.

Es gibt ja unzählige Dokumentationen online. An deiner Stelle würde ich mich erst mal ein wenig umschauen. So hat keine davon ein konfigurierbares Navigationsmenü. Gerade angesichts des zunächst kleinen Umfangs, kann ich mir nicht vorstellen, wozu das gut sein könnte.

Es ist deine Aufgabe eine sinnvolle Struktur und eine nachvollziehbare Benutzerführung zu gestalten. Es gehört zum Konzept. Dabei kann dir nur ein Insider helfen.

14 statische Seiten können ausreichen. Aber du suchst eine Struktur die mitwachsen kann. Da kommt man mit statischen Dokumenten schnell an die Grenze des Sinnvollen.

Marc

[AgofEx]

Danke an alle auch für die konstruktiven Hinweise, was Usability angeht! Ich nehme zur Kenntnis, dass diese modernen Arten von Suchmöglichkeiten offenbar sehr wichtig sind. Umsetzen werde ich sie in dieser Form aber erstmal nicht. Wenn ich das gewollt hätte, wäre ich sicher einfacher damit gefahren, MediaWiki oder WordPress an mein Design anzupassen und mit Content zu füllen. Das ist aber nicht mein Ziel.

Ich habe klar im Kopf, wie es aussehen und bedient werden soll, und die Umsetzung dieser exakten Idee soll für mich ein Lernprojekt sein. Mir fehlen elementare Kenntnisse überall. HTML und CSS beginne ich grob zu verstehen, auch von PHP und MySQL habe ich eine lückenhafte Vorstellung, da ich vor vielen Jahren schon mal ein wenig damit gemacht habe, JavaScript jedoch ist ein Buch mit sieben Siegeln für mich, allein die Syntax widerstrebt mir. Da ich ohne AJAX aber nicht auskommen werde für künftige Projekte, muss ich mir das alles, langsam und Stück für Stück, reinziehen. Mein Fulltime-Job hat nichts mit IT zu tun, und ich bin mit knapp 50 auch aus dem Turbolernalter raus. Daher wird es dauern…

Danke nochmal!