Ein "funktionierendes" Dropdown-Menü?!
Posted: Sat May 30, 2015 12:47 pm
Hallo zusammen,
ich eröffne den Thread in diesem Forum, weil ich mir hier mehr Beteiligung, Hinweise und vielleicht Lösungen als in OD erhoffe.
Wie der Titel schon beschreibt bin ich auf der Suche nach einem wirklich "überall" funktionierenden DropDown-Menü, welches sich mit CMSimple_XH auch erstellen und verwalten lässt.
Natürlich gibt es viele Ansätze dazu im Web zu finden, nur lassen sie sich allesamt nicht (oder nicht so einfach) mit CMSimple(_XH) umsetzen.
Das Problem ist die Bedienbarkeit mit Touch-Geräten. Während bei hover mit der Maus über das Elternelement das Untermenü eingeblendet wird, wird bei einem Tap anstatt des Untermenüs die Elternseite geöffnet. Die Unterseiten sind dann per DropDown nicht erreichbar und als Notbehelf ist subemnu() der einzige Ausweg.
Workarounds für dieses Problem gibt es einige. Zum Beispiel verwendet Ludwigs "SimpleCrazyX"-Template ein kleines JavaScript, das das Verhalten bei Touch-Geräten anpasst: beim ersten Tap wird einfach die Standard-Funktion des Browsers, nämlich die Seite zu öffnen, unterdrückt. Dadurch wird das Untermenü dann sicht- und navigierbar. Erst der zweite Tap auf den Eintrag öffnet die darunter liegende (Eltern-) Seite. Das Konzept gibt es schon länger, hat sich in der Praxis aber nicht durchgesetzt - zumindest ist es mir nicht oft begegnet. Denn es hat einen ganz großen Schwachpunkt: die Elternseite werden nur die wenigsten Besucher zu Gesicht bekommen, denn der zweite Tap ist nicht intuitiv erfassbar. Bei eigenen, natürlich nicht repräsentativen, Versuchen mit Ludwigs Template hat jedenfalls nicht ein Proband zweimal getappt. Weshalb auch?
Den finalen Todesstoß bekommen diese Ansätze aber auf Geräten die mit Touchscreen und mit Maus bedienbar sind. Spätestens seit Windows 8 gibt es immer mehr solcher Geräte und Microsofts Surface ist da nicht der einzige Kandidat. Ich konnte das Template nicht auf solch einem Gerät testen, aber wenn ich den Code von touch-menu.js anschaue braucht es dort dann 2 Taps oder 2 Mausklicks um den Inhalt der Elternseite sichtbar zu machen .
Eine andere, sicher leichter zu erfassende Variante findet man hier: http://jasonweaver.name/lab/flexiblenavigation/
Alle Seiten öffnen beim Tap auf den Text, die Untermenüs öffnen beim Tap auf das Pfeilsymbol. Bei Mausbedienung läuft alles wie gewohnt.
Leider ist dafür JavaScript Voraussetzung (was für mich heute nicht mehr unbedingt ein KO-Argument wäre). Aber das Skript hat sehr viele Bugs und wird seit langer Zeit nicht mehr aktiv entwickelt.
Diese Lösung wäre aber mit CMSimple_XH ohne Klimmzüge verwaltbar und nebenbei auch gleich responsive.
Die heute gängige Praxis für Dropdown-Menüs löst all die Probleme indem Elternelemente, die ein DropDown öffnen, einfach keine Links zu Inhalten enthalten. Gekennzeichnet werden solche "Opener" durch einen kleinen, nach unten zeigenden Pfeil neben dem Linktext. Viele moderne Frameworks oder Menü-Skripte, u.A. auch Bootstrap lösen das Problem so. Die Bedienung ist auf allen Geräten gleich: Klick oder Tap öffnen lediglich das Untermenü. Wer sich die Mühe macht und beim Surfen einmal darauf achtet, wird mir zustimmen das diese Lösung gängige Praxis ist.
Voraussetzung ist also lediglich:
Menüeinträge von Elternseiten müssen klickbar sein, dürfen als Linkziel aber keine Inhaltsseiten haben. Sie sind lediglich "Opener" für Untermenüs - egal auf welcher Menüebene.
Eigentlich simpel.
Nur geht eben genau das nicht mit CMSimple(_XH) Hausmitteln.
Aktuell lässt sich per Template die Klasse XH_li mit den vorhandenen Methoden leicht so erweitern, dass für Menüeinträge aller Seiten, die Unterseiten haben, einfach "href=#" gesetzt wird. Dann funktioniert zwar das DropdownMenü, aber die nächste Bastelei fängt bei der Suchfunktion an und hört vermutlich bei der Sitemap nicht auf. Bei der Sitemap könnte man zwar auch per JS oder DomDocument einfach die Linkziele der Elternseiten manipulieren, was dann wenigsten updatesicher wäre, aber mangels entsprechender Container oder Klassen scheitert das dann spätestens bei der Ausgabe der Suchfunktion.
Mit der Tatsache, dass die Elternseiten weiterhin durch den Editor erreichbar und editierbar sind, eventuelle Inhalte aber nicht navigierbar sind, könnte ich leben.
Auch wäre es vermutlich leicht möglich auf den entsprechenden Seiten einen Warnhinweis über dem Editor anzuzeigen.
Ich würde mich sehr über Hinweise oder, noch besser , konkrete Lösungen freuen.
Kurzfristig würde ich mir eine auf dem Core basierende Lösung wünschen. Vielleicht, ähnlich der Konfigurationsoption menu_sdoc=parent, einfach einen Schalter, der dann XH_li entsprechend beeinflusst und somit zumindest das Problem mit der Sitemap noch löst. Für die Suchfunktion müsste das dann natürlich ebenfalls berücksichtigt werden und solche "Opener" - Seiten dürften keine Suchergebnisse liefern.
Ich bin der Meinung das wäre einfacher machbar, als die ganzen Patches per Template etc.
Trotzdem wäre kurz- bis mittelfristig eine konkrete Lösung für mich sehr willkommen!
LG
Holger
ich eröffne den Thread in diesem Forum, weil ich mir hier mehr Beteiligung, Hinweise und vielleicht Lösungen als in OD erhoffe.
Wie der Titel schon beschreibt bin ich auf der Suche nach einem wirklich "überall" funktionierenden DropDown-Menü, welches sich mit CMSimple_XH auch erstellen und verwalten lässt.
Natürlich gibt es viele Ansätze dazu im Web zu finden, nur lassen sie sich allesamt nicht (oder nicht so einfach) mit CMSimple(_XH) umsetzen.
Das Problem ist die Bedienbarkeit mit Touch-Geräten. Während bei hover mit der Maus über das Elternelement das Untermenü eingeblendet wird, wird bei einem Tap anstatt des Untermenüs die Elternseite geöffnet. Die Unterseiten sind dann per DropDown nicht erreichbar und als Notbehelf ist subemnu() der einzige Ausweg.
Workarounds für dieses Problem gibt es einige. Zum Beispiel verwendet Ludwigs "SimpleCrazyX"-Template ein kleines JavaScript, das das Verhalten bei Touch-Geräten anpasst: beim ersten Tap wird einfach die Standard-Funktion des Browsers, nämlich die Seite zu öffnen, unterdrückt. Dadurch wird das Untermenü dann sicht- und navigierbar. Erst der zweite Tap auf den Eintrag öffnet die darunter liegende (Eltern-) Seite. Das Konzept gibt es schon länger, hat sich in der Praxis aber nicht durchgesetzt - zumindest ist es mir nicht oft begegnet. Denn es hat einen ganz großen Schwachpunkt: die Elternseite werden nur die wenigsten Besucher zu Gesicht bekommen, denn der zweite Tap ist nicht intuitiv erfassbar. Bei eigenen, natürlich nicht repräsentativen, Versuchen mit Ludwigs Template hat jedenfalls nicht ein Proband zweimal getappt. Weshalb auch?
Den finalen Todesstoß bekommen diese Ansätze aber auf Geräten die mit Touchscreen und mit Maus bedienbar sind. Spätestens seit Windows 8 gibt es immer mehr solcher Geräte und Microsofts Surface ist da nicht der einzige Kandidat. Ich konnte das Template nicht auf solch einem Gerät testen, aber wenn ich den Code von touch-menu.js anschaue braucht es dort dann 2 Taps oder 2 Mausklicks um den Inhalt der Elternseite sichtbar zu machen .
Eine andere, sicher leichter zu erfassende Variante findet man hier: http://jasonweaver.name/lab/flexiblenavigation/
Alle Seiten öffnen beim Tap auf den Text, die Untermenüs öffnen beim Tap auf das Pfeilsymbol. Bei Mausbedienung läuft alles wie gewohnt.
Leider ist dafür JavaScript Voraussetzung (was für mich heute nicht mehr unbedingt ein KO-Argument wäre). Aber das Skript hat sehr viele Bugs und wird seit langer Zeit nicht mehr aktiv entwickelt.
Diese Lösung wäre aber mit CMSimple_XH ohne Klimmzüge verwaltbar und nebenbei auch gleich responsive.
Die heute gängige Praxis für Dropdown-Menüs löst all die Probleme indem Elternelemente, die ein DropDown öffnen, einfach keine Links zu Inhalten enthalten. Gekennzeichnet werden solche "Opener" durch einen kleinen, nach unten zeigenden Pfeil neben dem Linktext. Viele moderne Frameworks oder Menü-Skripte, u.A. auch Bootstrap lösen das Problem so. Die Bedienung ist auf allen Geräten gleich: Klick oder Tap öffnen lediglich das Untermenü. Wer sich die Mühe macht und beim Surfen einmal darauf achtet, wird mir zustimmen das diese Lösung gängige Praxis ist.
Voraussetzung ist also lediglich:
Menüeinträge von Elternseiten müssen klickbar sein, dürfen als Linkziel aber keine Inhaltsseiten haben. Sie sind lediglich "Opener" für Untermenüs - egal auf welcher Menüebene.
Eigentlich simpel.
Nur geht eben genau das nicht mit CMSimple(_XH) Hausmitteln.
Aktuell lässt sich per Template die Klasse XH_li mit den vorhandenen Methoden leicht so erweitern, dass für Menüeinträge aller Seiten, die Unterseiten haben, einfach "href=#" gesetzt wird. Dann funktioniert zwar das DropdownMenü, aber die nächste Bastelei fängt bei der Suchfunktion an und hört vermutlich bei der Sitemap nicht auf. Bei der Sitemap könnte man zwar auch per JS oder DomDocument einfach die Linkziele der Elternseiten manipulieren, was dann wenigsten updatesicher wäre, aber mangels entsprechender Container oder Klassen scheitert das dann spätestens bei der Ausgabe der Suchfunktion.
Mit der Tatsache, dass die Elternseiten weiterhin durch den Editor erreichbar und editierbar sind, eventuelle Inhalte aber nicht navigierbar sind, könnte ich leben.
Auch wäre es vermutlich leicht möglich auf den entsprechenden Seiten einen Warnhinweis über dem Editor anzuzeigen.
Ich würde mich sehr über Hinweise oder, noch besser , konkrete Lösungen freuen.
Kurzfristig würde ich mir eine auf dem Core basierende Lösung wünschen. Vielleicht, ähnlich der Konfigurationsoption menu_sdoc=parent, einfach einen Schalter, der dann XH_li entsprechend beeinflusst und somit zumindest das Problem mit der Sitemap noch löst. Für die Suchfunktion müsste das dann natürlich ebenfalls berücksichtigt werden und solche "Opener" - Seiten dürften keine Suchergebnisse liefern.
Ich bin der Meinung das wäre einfacher machbar, als die ganzen Patches per Template etc.
Trotzdem wäre kurz- bis mittelfristig eine konkrete Lösung für mich sehr willkommen!
LG
Holger