H2Menü mit HTML5

Da viele Besucher die MSXFAQ auch auf Servern oder privilegierten Systemen aufrufen, versuche ich die Webseite möglichst "risikofrei" bereitzustellen. Sie können die MSXFAQ z.B. komplett ohne JavaScript, Cookies, Flash o.ä. nutzen. Allerdings gibt es wenige Zusatzfunktionen auf Seiten wie z.B. den ICEWarn Decoder, die ohne JavaScript nicht funktionieren.

Ich habe aber z.B. noch JavaScript genutzt, um das Inhaltsverzeichnis pro Seite an der damals rechten Seite auf- und zuzuklappen. Ohne JavaScript war das Verzeichnis immer geöffnet und auf Mobilgeräten hat es auch nicht perfekt funktioniert. Mittlerweile unterstützen aber quasi alle Browser die verschiedenen HTML5-Erweiterungen und insbesondere "<details>" und "<summary>"


Quelle: https://caniuse.com/details

Einzige der alte "Internet Explorer 11" und ein Opera Mini würden dann einfach den Inhalt komplett anzeigen.

Für mich war das aber ein Grund mehr, das Inhaltsverzeichnis pro Seite von CSS-Anpassungen per JavaScript auf HTML5 umzustellen. Ich habe es im gleichen Zug direkt unter die "H1"-Überschrift der Seite und minimiert gelegt und nicht mehr rechts als Block platziert.

Test Einfach

Ich habe das natürlich erst einmal in einem Testbereich ausprobiert, wie es aussieht und funktioniert. Folgender HTML-Code zeigt die grundlegende Funktion.

Summary
  • Detail1
  • Detail2

Das hier noch die Aufzählungszeichen davor sind, ist dem allgemeinen Layout für Aufzählungen im Artikeltext geschuldet. Aktuell nutze ich solche Aufklapp-Elemente nur beim Inhaltsverzeichnis und daher stört esnicht

Verschachtelung

Vielleicht würde ich damit auch noch das Menü am linken Rand anpassen. Dann müsst es mehrstufig sein und einige Menüs müssten aufgeklappt sein. Das geht mit der Angabe von "Open".

Entsprechen sind  hier dann "Summary1" mit den beiden Unterpunkten als auch die Unterpunkte von "Summary11" geöffnet.

Summary1
  • Summary11
    • Detail111
    • Detail112
  • Summary12
    • Detail121
    • Detail122

Ich habe noch nicht entschieden, wann und wie ich das linke Menü zukünftig umstelle. Es ist doch schon recht groß geworden und ich weiß nicht, ob es tatsächlich genutzt wird. Vielleicht muss ich mir ganz generell einmal Gedanken über die Navigation machen. Wobei laut Google Analytics/Tagmanager die meisten Besucher über Suchmaschinen auf der MSXFAQ landen und meist schon auf der Seite finden, was sie suchen oder auf wenigen verlinkten Seiten weiter lesen.

Formatierung

Damit Sie als Leser natürlich auch sehen können, dass hier ein Bereich mit "Klappenfunktion" ist, bildet der Browser davon schon die Pfeile ab, die aber vielleicht untergehen. Daher habe ich mir überlegt, die Aufklappinhalte farblich etwas abzuheben. Da der allgemeine Hintergrund der MSXFAQ ein helles Grau ist, habe ich einfach den Hintergrund der aufklappbaren Inhalte des H2MENU weiß gemacht.

Weitere Links