Ein "funktionierendes" Dropdown-Menü?!

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

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

Post by wbs » Sun Apr 02, 2017 3:09 pm

Wäre es sehr herausfordernd, Ludwigs funktionierendes Menü mit den Burgern auf in dem Template unterzubringen? Kann das jemand einschätzen?

cmb
Posts: 13274
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

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

Post by cmb » Sun Apr 02, 2017 4:51 pm

wbs wrote:Wäre es sehr herausfordernd, Ludwigs funktionierendes Menü mit den Burgern auf in dem Template unterzubringen? Kann das jemand einschätzen?
Das kommt darauf an was genau Du mit "Ludwigs funktionierendes Menü" meinst, und vor allem in welchem Template es eingebaut werden soll. Ganz trivial ist es auch im einfachsten Fall nicht, aber super aufwendig oder gar unmöglich wohl auch im unglücklichsten Fall nicht.

Handelt es sich beim gewünschten Zieltemplate um http://demo.torsten-behrens.de/?&user_t ... vitaTessem (wie im CMSimple Forum angefragt), dann sollte es auf jeden Fall machbar sein, eines von Ludwigs Dropdown-Menüs einzubauen.
Na schade, hatte das so in erinnerung, dass alle an XH gearbeitet haben und es dann umbenannt wurde...
Nicht ganz, denn CMSimple_XH wird noch immer unabhängig von CMSimple weiter entwickelt.
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

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

Post by wbs » Sun Apr 02, 2017 5:19 pm

Ich meine, dass das bestehende Menü so verwendet werden kann, dass Dropdown auch auf Touchgeräten funktioniert.

In der Version für schmale Breiten funktioniert das Menü ja auch nicht schön, das Menü wird trotz Unterseiten eingeklappt...

Ups, ich dachte, ich hätte das Template verlinkt.

Ja, als ich draufgekommen bin, dass CMSimple_XH eigenständig weiterentwickelt wird, habe ich sofort gewechselt.

cmb
Posts: 13274
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

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

Post by cmb » Mon Apr 03, 2017 9:56 am

wbs wrote:Ich meine, dass das bestehende Menü so verwendet werden kann, dass Dropdown auch auf Touchgeräten funktioniert.
Das grundsätzliche Problem bei Touch-Eingabe sind links (<a> Elemente) die bei :hover aufklappen. Das funktioniert halt super bei Mauseingabe, aber eben nur sehr mäßig bei Touch-Eingabe (bei mir geht's wenn ich lange auf einen solchen Link tippe bis das Menü erscheint, und dann einfach kurz neben das Menü tippe; aber das ist natürlich nicht intuitiv, und sowieso zu umständlich). Ludwig hat das wohl so gelöst, dass es zusätzlich zu den eigentlichen Links eben noch kleine "Schalter" gibt, die nur dem Aufklappen dienen. Ein bestehendes Menü so anzupassen, ist wohl nicht ohne, zumal viele von Torstens Templates ein ganz eigenes Menüsystem verwenden.

Aber da ja alle Seiten ein Untermenü ("weiter zu:") haben, kann man damit vielleicht auch leben.
wbs wrote:In der Version für schmale Breiten funktioniert das Menü ja auch nicht schön, das Menü wird trotz Unterseiten eingeklappt...
Wenn es insgesamt nicht allzu viele Seiten gibt, dann könnte man einfach alle Seiten aufgeklappt anzeigen, was leicht machbar wäre. Einfach in style.responsive.css Zeile 376 auskommentieren:

Code: Select all

   /*display: none !important;*/
Vielleicht haben andere noch ein paar konkretere Tipps; ansonsten frag doch bei Torsten mal an.
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

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

Post by wbs » Mon Apr 03, 2017 10:14 am

Danke, der Tipp mit dem Ausklappen ist schon mal goldwert. Und ja, "Weiter zu" ist sowieso da

Aber mal ganz generell. Ich bin dankbar, dass es Leute gibt, die kostenlos Templates machen. Wenn diese noch responsiv sind, find ich das super. Allerdings verstehe ich nicht, was der Hintergedanke ist, Untermenüs auf Touchscreens und kleinen Bildschirmen dafür nicht einzubeziehen. Genau dafür sind doch responsive Templates (auch) da. Das Problem haben sehr viele Wordpresstemplates auch, da gibt's allerdings ein Plugin, das Abhilfe schafft: https://wordpress.org/plugins/black-stu ... down-menu/

Auf torsten-berens.de funktioniert übrigens zumindest das Ausklappen des Burgermenüs auf kleinen Geräten. Auf einem (Android-)Tablet funktioniert das Menü auch nicht.

Ich habe ihm gemailt. Da die Dienstleistungen per Website (15 Minuten E-Mail-Support plus Link-Remove-Lizenz nur mit Wohnsitz in Deutschland bestellbar sind, hoffe ich, dass er antwortet.

Anscheinend sind Dropdownmenüs sowieso am aussterben. Viele Seiten verwenden ja im Sinne von "Mobile First" überhaupt nur mehr Ausklappbare Burger oder nur eine Ebene in Horizontalen Menüs. Nur als Beispiel, nichtmal bei diepresse.com, einer Zeitung die doch Leser hat, funktioniert das Ausklappen auf meinem Tablet. iOS scheint dafür einen Fix zu haben.

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

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

Post by lck » Mon Apr 03, 2017 11:30 am

wbs wrote:Ich meine, dass das bestehende Menü so verwendet werden kann, dass Dropdown auch auf Touchgeräten funktioniert.
Hallo wbs,

welche Version meines Dropdown-Menüs hast du eigentlich getestet, eventuell das hier, das ich zu Testzwecken online gestellt habe?
Das ist aber nicht der neueste Stand, das aktuelle Menü findest du in meinen Templates SimpleCrazyX02, UnderTheBridge und DontPlayGames.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 13274
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

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

Post by cmb » Mon Apr 03, 2017 11:45 am

wbs wrote:Allerdings verstehe ich nicht, was der Hintergedanke ist, Untermenüs auf Touchscreens und kleinen Bildschirmen dafür nicht einzubeziehen. Genau dafür sind doch responsive Templates (auch) da.
Ja, denke ich auch. Es kann aber sein, dass ein Designer auf Geräten testet, die dieses Problem bereits gelöst haben, und das ist wohl bei iOS Safari ab Version 5 der Fall.
wbs wrote:Das Problem haben sehr viele Wordpresstemplates auch, da gibt's allerdings ein Plugin, das Abhilfe schafft: https://wordpress.org/plugins/black-stu ... down-menu/
Dieses oder ein vergleichbares wurde hier im Forum auch schon angesprochen (von Ludwig?) Soweit ich es überblicke kann das auch mit ein wenig JavaScript "gelöst" werden. Das ist, wie auch im letzten Abschnitt des Artikels beschrieben, zwar nur ein Workaround, aber ich denke, schon ein recht passabler, da zumindest auf Mobiles JavaScript in der Regel aktiviert sein dürfte.

Konkret für EvitaTessem habe ich folgendes unten (direkt vor </body>) in template.htm eingefügt:

Code: Select all

<script type="text/javascript">
// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;
 
// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) {
    var i, len, element,
        dropdowns = document.querySelectorAll("nav.tbis-nav a");

    function menuTouch(event) {
        // toggle flag for preventing click for this link
        var i, len, noclick = !(this.dataNoclick);
 
        // reset flag on all links
        for (i = 0, len = dropdowns.length; i < len; ++i) {
            dropdowns[i].dataNoclick = false;
        }
 
        // set new flag value and focus on dropdown menu
        this.dataNoclick = noclick;
        this.focus();
    }
 
    function menuClick(event) {
        // if click isn't wanted, prevent it
        if (this.dataNoclick) {
            event.preventDefault();
        }
    }
 
    for (i = 0, len = dropdowns.length; i < len; ++i) {
        element = dropdowns[i];
        element.dataNoclick = false;
        element.addEventListener("touchstart", menuTouch, false);
        element.addEventListener("click", menuClick, false);
    }
}
</script>
Das scheint ganz ordentlich zu funktionieren, sprich beim ersten Tab wird ausgeklappt, beim zweiten dann navigiert.
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

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

Post by wbs » Mon Apr 03, 2017 12:02 pm

Eigentlich geht's mir um wurscht welches Menü, hauptsache es funktioniert. :D

Eigentlich wäre es eh am vernünftigsten, Deine hier aufgezählten Templates entsprechen eh mehr aktuellem Webdesign als die meisten anderen für CMSimple (und auch für andere CMS). Das einzige, was ich als unmodern empfinde, ist das Hintergrundbild beim Inhalt. Aber das kann man ja leicht ausschalten.

Das CSS ist wirklich sehr kurz im Vergleich zu anderen Templates. Ich schätze, das Menü kleiner zu machen, den Hintergrund beim Content auszuschalten und die Punkte zum Ausklappen von Subemüs mit den Strichen von SimpleCrazyX02 auszutauschen und die Schriftarten und Farben zu verändert würde wahrscheinlich schneller gehen, als die Auseinandersetzung mit anderen Templates auf Touchscreens.

@cmb: Wenn ich das Skript einbinde, muss ich auf alle Menüeinträge zweimal tippen. Auf H1 ebenso wie auf H2 (und vermutlich auch H3)

cmb
Posts: 13274
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

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

Post by cmb » Mon Apr 03, 2017 1:17 pm

lck wrote:Das ist aber nicht der neueste Stand, das aktuelle Menü findest du in meinen Templates SimpleCrazyX02, UnderTheBridge und DontPlayGames.
Ah, danke! Beim Anschauen von simplecrazy ist mir übrigens aufgefallen, dass Chrome diese Seite aus dem Walisischen übersetzen will. Dem könnte abgeholfen werden, wenn man im Template <html lang> fixiert:

Code: Select all

<html lang="de"> 
Passt natürlich nicht, wenn die Templates allgemein ausgeliefert werden sollen. :(
wbs wrote:Das CSS ist wirklich sehr kurz im Vergleich zu anderen Templates. Ich schätze, das Menü kleiner zu machen, den Hintergrund beim Content auszuschalten und die Punkte zum Ausklappen von Subemüs mit den Strichen von SimpleCrazyX02 auszutauschen und die Schriftarten und Farben zu verändert würde wahrscheinlich schneller gehen, als die Auseinandersetzung mit anderen Templates auf Touchscreens.
Ich bin nicht sicher, da Torstens Templates ja ein ganz anderes Menüsystem verwenden als Ludwigs. Da könnte einiges nachzuarbeiten sein (vermutlich nicht nur CSS).
wbs wrote:Wenn ich das Skript einbinde, muss ich auf alle Menüeinträge zweimal tippen. Auf H1 ebenso wie auf H2 (und vermutlich auch H3)
Ja, ich weiß. Ich wüsste aber nicht, wie man das beheben kann. Da ist wohl schon anderes JS im Spiel (script.responsive.js?), das nicht angezeigte Menüpunkte temporär aus dem DOM entfernt, und anscheinend gibt es auch kleine Klasse wie .sdocs bzw. .docs, die genutzt werden könnte.
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

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

Post by wbs » Mon Apr 03, 2017 1:46 pm

Ich meinte ja, dass ich das andere Template fallenlasse und die Seite mit angepasstem UnderTheBridge machen könnte.

Aber lustig, auf Android (und Windows?)-Touchscreens wird konsequent gepfiffen. Auf http://diepresse.com funktionierts bei mir auch nicht.

Ich würd den Developern da was erzählen... wie viel das kosten muss...

/edit: Achso, diepresse.com hatte ich ja schon erwähnt.

Post Reply