Dropdownmenü automatisch erweitern lassen.

[Rolf B]

Hallo Beer,

dein Video habe ich erstmal mit einem "Nicht Nachmachen" kommentiert. Es ist nicht bedienbar. Was heißt: Nicht mit jedem Eingabegerät bedienbar. Probier's mal mit Tastatur…

Unser Wiki hat leider auch noch kein einfaches, bedienbares Dropdownmenüs, was aber daran liegt, dass die bedienbare Version eines solchen Menüs auch nicht einfach ist.

Eine ausführliche, wenn auch anspruchsvolle Diskussion des Themas findet man bei Heydon Pickering, Inclusive Components

Unser Wiki enthält ein Dropdown-Menü, das auf dem details-Element aufbaut. Aus Sicht der Bedienbarkeit ganz gut, aus Sicht der Zugänglichkeit (sprich: Was macht ein Screenreader daraus) leider auch noch suboptimal.

Was Pickering und unser Wiki gemeinsam haben, ist: Ohne JavaScript geht's nicht. Ein reines CSS Dropdown-Menü ist schlecht bedienbar.

Zu deinem Anliegen: Welches serverseitige Know-How hast Du? Wenn Du das Menü über ein Form konfigurieren können möchtest, musst Du Dir eine passende Eingabelogik für eine Dropdown-Hierarchie überlegen. Das ist nicht einfach ein Form - du bräuchtest ja auch ggf. Möglichkeiten, Menüelemente von A nach B zu verschieben wenn sich am Menü etwas ändert, und das soll keine Klick-Orgie werden.

Eine simple Lösung ist eine Art Wiki-Syntax, die Du mit einer einfachen textarea bearbeitest. Diese Syntax in PHP zu parsen ist so kompliziert nicht. Das Arbeitstier ist explode, zuerst um die Zeilen aufzutrennen, dann um die Zeilen zu zerlegen. Man kann das auch in JavaScript tun. Aber deswegen fragte ich nach deinem Know How.

Ein Formular, das dem User ein bequemes Editieren des Menüs erlaubt und für jeden Menüpunkt ein Eingabefeld vorsieht, ist NICHT trivial zu programmieren. Ist es trivial programmiert, dann ist es extrem umständlich zu bedienen, sobald man Menüpunkte umstellen will. Eine textarea bietet dagegen dem User alle Cut+Paste Möglichkeiten. Natürlich muss der User die Eingabesyntax beherrschen, und deswegen muss sie einfach sein.

index.html|Startseite

#|Punkt1
* uebersicht1.html|Übersicht1
* #|Übersicht2
** Unterseite.html|Unterseite

#|EG
* uebersicht2.html|Übersicht2
* #|OPD
** Kamera_OPD1.html|Kamera OPD 1
** Kamera_OPD2.html|Kamera OPD 2

# | 1.OG

*  # | Bau1
*  # | Bau2

**  # | OPD1
**  # | OPD2
**  # | OPD3

#|2.OG

formular.html|Formular

Die Leerzeilen und Leerstellen hinter Sternchen oder um die | Zeichen sind nur für die Lesbarkeit. Beim Einlesen ignorierst Du die. Die Zeilen ohne Sternchen sind Hauptmenüpunkte, mit einem Stern die Untermenüs, mit zwei Sternen die Unter-Untermenüs. In jeder Zeile ist hinter den Sternchen das Link-Ziel angegeben, dann ein | und dahinter der Text.

Das kann man - beispielweise - am Server einlesen, zerlegen und daraus die Listenstruktur generieren, die Du verwendet hast.

Um die Hauptmenü-Elemente fett zu machen, sollte man nicht mit <strong> arbeiten. Statt dessen nimmt man CSS; es gibt im Stylesheet sicherlich eine Regel die nur die Hauptmenüs trifft und dort notierst Du font-weight: bold.

Wenn Du tatsächlich individuelle Formatierungen für einzelne Menüelemente brauchst, dann überlege Dir, ob Du einen zweiten senkrechten Strich akzeptieren willst. Damit könnte man dann schreiben:

formular.html|font-size:1.5em|Formular 

Wenn Du am Server PHP verwendest, machst Du auf die Zeile ein explode, um die Elemente am | aufzuteilen, und dann siehst Du an der erhaltenen Array-Größe, wieviele | in der Zeile waren. Entsprechend kannst Du den mittleren Teil als Formatierungsanweisung in ein style-Attribut packen.

Verwende dabei übrigens möglichst eine relative Fontgröße wie em. Nicht px. Das skaliert nicht, wenn der User sein Display zoomen möchte.

Alternativ könntest Du auch dies akzeptieren:

formular.html|.wichtig|Formular 

Der Punkt würde CSS-typisch einen Klassennamen bezeichnen und du könntest dann ein class="wichtig" generieren (ohne den Punkt). Im Stylesheet würde dann die Formatierung für wichtig hinterlegt.

Rolf