Ein "funktionierendes" Dropdown-Menü?!

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Ein "funktionierendes" Dropdown-Menü?!

Post by Holger » 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

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by cmb » Sun May 31, 2015 2:06 pm

Holger wrote: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.
Guter Punkt! Vermutlich kommen auch die wenigstens Anwender auf die Idee, bei einem "normalen" Drop-Down-Menü einfach mal länger auf einen übergeordneten Punkt zu "tappen", was zumindest in diversen aktuellen Browsern ganz gut funktionieren sollte.
Holger wrote:Den finalen Todesstoß bekommen diese Ansätze aber auf Geräten die mit Touchscreen und mit Maus bedienbar sind.
Ja, das ist wohl ein Problem. Ich meine mich zu erinnern, dass das Thema bei Ludwigs Template bereits aufkam – ohne die Möglichkeit mit solchen Geräten zu testen, ist das aber wohl nicht in den Griff zu bekommen.
Holger wrote: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).
Ich finde solche JS basierten Menüs problematisch. Ich hatte kürzlich mit einem solchen zu tun (basierend auf Droptron), und das hat die Anpassung nicht gerade leicht gemacht. Besonders garstig fand ich in diesem Fall, dass ohne JS einfach nur das Toplevel dargestellt wurde, so dass dann noch submenu() als Fallback zu ergänzen war. Und beim Testen musste ich letztlich immer wieder JS aktivieren/deaktivieren, was doch einigen Mehraufwand bedeutet.
Holger wrote: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.
Das ist auf jeden Fall in Erwägung zu ziehen. Setz es doch bitte auf die Roadmap, damit es nicht vergessen geht – schön wäre es, wenn jemand einen Patch/Feature Branch ausarbeiten könnte, damit man es direkt ausprobieren kann.
Christoph M. Becker – Plugins for CMSimple_XH

ojay
Posts: 78
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by ojay » Sun May 31, 2015 4:26 pm

Moin,

ich kann nur ein Beispiel zeigen, wo es IMHO gut funktioniert.
Es ist ein Kaufprogramm (Lizenz).
http://lythgoes.net/genealogy/?sitever=standard -> Desktop-Ansicht
http://lythgoes.net/genealogy/?sitever=mobile -> mobilen Ansicht
Das sind nur die Zwangslinks, die immer ein Ansichtwechsel ermöglichen, ansonsten ist die Browserweiche aktiv. (Browser-Kennung ("User Agents"))

Dieses Programm kann man übrigens mit CMSimple vergleichen, wo ein Autor alle Änderungen entscheidet. :)
So entstehen keine Gabeln, Löffel oder Messer... ;)

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Holger » Mon Jun 01, 2015 12:35 pm

ojay wrote:ich kann nur ein Beispiel zeigen, wo es IMHO gut funktioniert.
Danke für die Links, aber im Bezug zu einer konkreten Lösung mit CMSimle_XH hilft mir das auf den ersten Blick nicht weiter.
cmb wrote:
Holger wrote: 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.
Das ist auf jeden Fall in Erwägung zu ziehen. Setz es doch bitte auf die Roadmap, damit es nicht vergessen geht – schön wäre es, wenn jemand einen Patch/Feature Branch ausarbeiten könnte, damit man es direkt ausprobieren kann.
Nach einer langen Nacht bin ich nicht mehr sicher, ob mein Vorschlag oben wirklich nützlich ist. Zumal es einen ganzen Sack voll Änderungen nach sich ziehen würde.
Und wenn ich mir noch einmal Ludwigs Demo mit den vielen Untermenüs ansehe wäre es - glaube ich zumindest - doch besser, wenn die Elternseiten echte Inhaltsseiten bleiben. Ansonsten mutieren komplexe Dropdowns zu Klick-Orgien die, wie im Beispiel, 3 Klicks / Taps bis zum ersten Inhalt brauchen...

Also zurück zum Anfang :roll: :
Mittels XH_li lässt sich im Teplate (oder als Plugin) doch sehr viel machen (auch wenn ich die Zusammenhäne noch immer nicht ganz durchschaue).
Ich habe mal eine Variante von SimpleCrazyX ins Netz gesetzt. In den <li>'s mit Unterseiten ist jetzt ein <div> mit einem Hamburger-Symbol angehängt. Der Link dahinter öffnet lediglich das Untermenü, während der Link auf den Titel die Seite öffnet. Die Dimensionen sind so, dass sich das Menü auch gut auf Tablets bedienen lässt.
Die Lösung verzichtet jetzt auf JS und sollte überall gleich bedienbar sein.

Jetzt die Frage an die Cracks:
1. Wie schaffe ich es, dass die Untermenüs nur bei hover/tap auf den Hamburger-DIV aufgehen? [1]
2. Wie bekomme ich den Linktext auf zwei Zeilen umbrechend (ein zusätzliches Blockelement innerhalb der <li>'s ist schon auskommentiert vorgesehen). Die Höhe und Breite der Menüpunkte soll aber erhalten bleiben.
(Links zum Download der template.htm und der stylesheet.css sind auf oben verlinkter Seite)

Hat jemand eine Idee?

[1] PS: Ich meine natürlich ausschließlich mittels CSS. Mit JS ist es überhaupt kein Problem.
Last edited by Holger on Mon Jun 01, 2015 12:40 pm, edited 1 time in total.
Reason: PS dazu

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by cmb » Mon Jun 01, 2015 1:02 pm

Holger wrote:Mittels XH_li lässt sich im Teplate (oder als Plugin) doch sehr viel machen (auch wenn ich die Zusammenhäne noch immer nicht ganz durchschaue).
So wie es derzeit ist, ist es noch ziemlich unelegant. Da ist auf jeden Fall noch jede Menge Raum für Verbesserungen – Vorschläge sind willkommen. :)
Holger wrote:Ich habe mal eine Variante von SimpleCrazyX ins Netz gesetzt. In den <li>'s mit Unterseiten ist jetzt ein <div> mit einem Hamburger-Symbol angehängt. Der Link dahinter öffnet lediglich das Untermenü, während der Link auf den Titel die Seite öffnet.
Sehr gute Idee – gefällt mir!
Holger wrote:Wie schaffe ich es, dass die Untermenüs nur bei hover/tap auf den Hamburger-DIV aufgehen?
Ich denke, das sollte leicht machbar sein, wenn die <ul>s nicht Siblings der <div>s, sondern Kinder davon sind.
Holger wrote:Wie bekomme ich den Linktext auf zwei Zeilen umbrechend (ein zusätzliches Blockelement innerhalb der <li>'s ist schon auskommentiert vorgesehen). Die Höhe und Breite der Menüpunkte soll aber erhalten bleiben.
Das müsste eigentlich möglich sein, wenn Du nicht den <li>s, sondern den <a>s eine bestimmte height zuweist. Damit dann die Texte vertikal zentriert erscheinen, vielleicht für die <a>s display:table-cell und vertical-align:middle.
Christoph M. Becker – Plugins for CMSimple_XH

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Holger » Mon Jun 01, 2015 6:03 pm

cmb wrote:Sehr gute Idee – gefällt mir!
Na ja, zumindest halbwegs intuitiv.
cmb wrote:Ich denke, das sollte leicht machbar sein, wenn die <ul>s nicht Siblings der <div>s, sondern Kinder davon sind.
Ja klar, sind sie aber nicht. Ich dachte, es gibt vielleicht einen simplen Workaround... Aber Schwestern und Eltern werden wohl erst in CSS5 berücksichtigt.
Also wieder XH_li :shock: -- dann nehm' ich besser gleich DomDocument und bastel's mir im Nachhinein :oops: .
cmb wrote:Das müsste eigentlich möglich sein, wenn Du nicht den <li>s, sondern den <a>s eine bestimmte height zuweist. Damit dann die Texte vertikal zentriert erscheinen, vielleicht für die <a>s display:table-cell und vertical-align:middle.
Nee, klappt leider auch nur beinahe. Vermutlich muss der Link dann auch gleich besser noch in ein <div> etc. ?

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Holger » Mon Jun 01, 2015 6:36 pm

Holger wrote:Also wieder XH_li :shock: -- dann nehm' ich besser gleich DomDocument und bastel's mir im Nachhinein
Na ja, geht eigentlich doch ganz einfach mit einer kleinen Erweiterung von renderULStartTags($i).
Aber die dadurch nötigen CSS-Anpassungen...

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by cmb » Mon Jun 01, 2015 8:32 pm

Holger wrote:
cmb wrote:Sehr gute Idee – gefällt mir!
Na ja, zumindest halbwegs intuitiv.
Und kommt im Zweifel ohne JS Tricksereien aus. :)
Holger wrote:Na ja, geht eigentlich doch ganz einfach mit einer kleinen Erweiterung von renderULStartTags($i).
Das sollte auch so sein. Meine Idee beim Refactoring war, dass man letztlich sogar sehr andere Strukturen aufbauen kann, ohne gleich das ganze li() neu programmieren zu müssen. Da gibt es noch allerdings noch viel zu verbessern. Immer raus mit Ideen und Vorschlägen. :)
Holger wrote:
cmb wrote:Das müsste eigentlich möglich sein, wenn Du nicht den <li>s, sondern den <a>s eine bestimmte height zuweist. Damit dann die Texte vertikal zentriert erscheinen, vielleicht für die <a>s display:table-cell und vertical-align:middle.
Nee, klappt leider auch nur beinahe. Vermutlich muss der Link dann auch gleich besser noch in ein <div> etc. ?
Ich hatte das nur mal auf die Schnelle mit den Dev-Tools getestet, und bis auf tiefer verschachtelte Menüs ("Hinz & Kunz") hatte es soweit funktioniert. Den Link in ein <div> einzuschließen sollte bei modernen Browsern nicht nötig sein, ist evtl. aber für ältere Browser (ohne ausreichenden CSS 2.1 Support) sinnvoll.
Holger wrote:Aber die dadurch nötigen CSS-Anpassungen...
Das ist bestimmt aufwendig, ist aber ohnehin nicht meine Stärke. Vielleicht hat einer der Templatedesigner noch ein paar (bessere) Ideen?
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by lck » Mon Jun 01, 2015 9:51 pm

Holger wrote:2. Wie bekomme ich den Linktext auf zwei Zeilen umbrechend (ein zusätzliches Blockelement innerhalb der <li>'s ist schon auskommentiert vorgesehen). Die Höhe und Breite der Menüpunkte soll aber erhalten bleiben.
Mal auf die Schnelle, bitte mal testen.

Code: Select all

.tpllck_nav .menulevel1 li {
    border-bottom: none;
    float: left;
    display: inline-block;
    font-size: 1em;
    font-weight: 500;
    height: 4em;
    /* line-height: 4em; */
    margin: 0;
    width: 15em;
}

.tpllck_nav a {
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 50%;
    text-decoration: none;
    transform: translateY(-50%);
    width: 80%;
}

div.ddm_opener {
    /* background-color: #565D67; */
    /* border-left: 1px solid #FFF; */
    display: table;
    float: right;
    font-size: 1.7em;
    height: 100%;
    width: 10%;
}

.ddm_opener a {
    display: table-cell;
    vertical-align: middle;
}
 
Eventuell ist dann noch eine Anpassung des Menulevels 2+3 nötig (position: relative; top: 0;)

Das Dreieck in Menulevel 2 ist dann auch nicht mehr nötig und könnte man aus dem css löschen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Holger » Tue Jun 02, 2015 12:14 pm

Hallo Ludwig,

vielen Dank für die Hilfe, ich kann sie echt gebrauchen :roll: .
Was hälst Du eigentlich von der Idee mit dem zusätzlichen Link und dem Verzicht auf touch-menu.js?
Ludwig wrote:Mal auf die Schnelle, bitte mal testen.
Ah, der Schlüssel liegt bei:

Code: Select all

    top: 50%;
    transform: translateY(-50%);
Damit klappt das vertikale zentrieren, wenn man zusätzlich beim <div> für das Hamburger-Symbol korrigierend eingreifen würde.
Leider vererbt sich dass dann auch wieder auf die Kind-Elemente, was ich leider nicht ohne einen Menge Zeilen Code beheben konnte.

Zwischenzeitlich hatte ich bereits eine halbwegs funktionierende Lösung, die auch mit wenigen Anpassungen auskommt.
Damit ich bessere Möglichkeiten habe, wird dabei der Textlink und der Hamburger-Link eines Elternelements jeweils in ein <span> eingeschlossen. Die dann noch erforderlichen Änderungen sind einfach (zur Übersichtlichkeit habe ich am Ende einfach alle nötigen Änderungen überschrieben. Der Code könnte, verteilt im Stylesheet, natürlich kürzer sein):

Code: Select all

/* Erweiterungen fuer zweizeilige Link-Texte ML1 und Hamburger-Symbol mit Link in Eltern-Elementen */

.tpllck_nav a {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    line-height: 1.3em;
    padding: 0.7em 0.36em 0; /* fuer vertikale Ausrichtung noetig */
    /* vertical-align: middle;*/
}

ul.menulevel2  a {
    padding: 0 5px; /* Reset obere und untere Abstaende */
}

.tpllck_nav ul ul {
    position: relative;
}

.tpllck_nav ul ul ul {
    position: absolute;
}
span.ddm_link {
    float: left;
    /*width: 12.45em;*/
    width: 80%;
    height: 1%;
}

span.ddm_opener {
    float: right;
    font-size: 1.7em;
    width: 20%;
    /*width: 1.5em;*/
    /*background-color: #565D67;*/
}

span.ddm_opener a {
    padding: 0; /* fuer vertikale Ausrichtung noetig */
}
Problem bleibt nach wie vor die saubere vertikale Zentrierung der Elemente. Im Code oben sind dazu Paddings definiert -- was beim Experten wohl Kopfschütteln verursachen wird. Wenigstens sind die Abstände relativ definiert und eine Änderung der Basis-Schriftgröße für die Navigation erzeugt eine noch ansehnliche Ausgabe.
Ich denke die Probleme mit der Zentrierung resultieren (auch) aus den unterschiedlich definierten Font-Sizes für den Link-Text und das Symbol... Aber eine Grafik wollte ich eigentlich nicht nehmen.

Eine aktualisierte Demo gibt es an gleicher Stelle.

Vielleicht hat noch jemand eine Idee, wie man die Sache verbessern kann? Ansonsten finde ich es so jetzt ganz ansehnlich (die Pfeile müssten noch heraus, klar).
Holger wrote: 1. Wie schaffe ich es, dass die Untermenüs nur bei hover/tap auf den Hamburger-DIV aufgehen?.
... und die Eltern-Links das Dropdown nicht öffnen, sondern sofort die Seite laden?

Bei der Sache werde ich mich wohl von CSS verabschieden müssen und besser auf JS setzen.
Ich hab' mir das so gedacht:
<body> bekommt die Klasse ".noJS" angehängt und die jetzt aktiven Definitionen für hover etc. werden um "body.noJS" erweitert.
Per JavaScript - wenn aktiv - wird die Klasse dann vom Body-Tag entfernt und alternative Styles / Skriptcode kann dann ausgeführt werden.

Mal schau'n :) .
Last edited by Holger on Wed Jun 03, 2015 9:04 pm, edited 1 time in total.
Reason: Links aktualisiert

Post Reply