Ein "funktionierendes" Dropdown-Menü?!

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
lck
Posts: 1865
Joined: Wed Mar 23, 2011 11:43 am
Contact:

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

Post by lck » Wed Sep 30, 2015 11:58 am

Neue Testversion des DropDownMenüs ist online.
Bitte testen und berichten.

Was noch fehlt, ist eine mobiles Menü für Smartphones mit kleinen Viewports (als Ersatz für die jetzige Sitemap-Variante).
Ab welcher Auflösung, sollte eurer Meinung nach, das mobile Menü erscheinen? Wobei ich lernen musste, dass Auflösung und Viewport zwei unterschiedliche Dinge sind.
Last edited by lck on Wed Nov 25, 2015 7:35 pm, edited 1 time in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wsim123
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

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

Post by wsim123 » Thu Oct 15, 2015 7:56 pm

Es gibt auch andere noch nicht als Vorlagen angebotene moderne Varianten, die halt
in ein Template umgesetzt werden müssen (und evtl. Jquery erfordern):

http://jonraasch.com/demo/huge-dropdown-menu

sowie http://designmodo.com/create-css3-mega-menu/

dazu gibt es das jquery-mega-drop-down-menu.1.3.3.zip
Das Overlay effect menu
http://tympanus.net/Tutorials/OverlayEffectMenu/
und eine Variante auf http://codepen.io/tiavlad/share/zip/eIyHr/
als zip(overlay-effect-menu-with-jquery)

und ein HTML5 Dropdownmenü
http://idesignow.com/css/10-css3-drop-d ... rials.html bzw.
http://youhack.me/2011/09/18/how-to-bui ... with-css3/

solche Menüs bieten ganz andere Horizonte und sind für Handys praktisch

Ein flexibles Menü liegt auch auf Github

https://github.com/hjzheng/angular-mega-menu

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

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

Post by lck » Mon Oct 19, 2015 8:55 pm

Eine neue erweiterte Test-Version des Dropdown-Menüs ist online. Bitte auf Bedienbarkeit testen.

@wsim123:
Besten Dank für die Links. Die kenne ich natürlich und zig Dutzend andere, aber die erfüllen alle nicht die Anforderungen dieses Themas.

Hier geht es um ein gut bedienbares, auf allen Geräten nutzbares (auch Touch-Geräte) multilevel Dropdown-Menü, auch mit langen Linktexten (mehrzeilige Links) nutzbar und das, wenn möglich, ohne Verwendung von Javascript oder jQuery.
Die Menüs im Web sind meistens für CMSimple_XH nicht verwendbar/anpassbar, da sie entweder manuell erstellt werden, oder einfach durch ihren Aufbau nicht umsetzbar sind.
Last edited by lck on Wed Nov 25, 2015 7:35 pm, edited 1 time in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wsim123
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

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

Post by wsim123 » Wed Oct 21, 2015 2:10 pm


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

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

Post by Holger » Wed Oct 21, 2015 6:42 pm

wsim123 wrote:Dass in dieser Richtung schon etwas möglich (und etvl. noch mehr)

ist zeigt http://cmsimpleforum.com/viewtopic.php?f=13&t=4554

und damit http://test.leberecht.net/?Download_Template:glas_2col

bzw. http://test.leberecht.net/?Item_mit_4_Untermenus
Hab' ich mir mal angeschaut: hat genau die Schwächen, um die es eigentlich in dem Thread geht.

BTW: im Standard-Download ist bereits ein Template mit einem ähnlichen "Mega-Menü" enthalten: n6200tbis.

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

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

Post by lck » Wed Oct 21, 2015 7:18 pm

Holger wrote:Hab' ich mir mal angeschaut: hat genau die Schwächen, um die es eigentlich in dem Thread geht.
Genau so ist es, danke!
Was soll ich dazu noch sagen, ausser auf meinen Post von vorgestern verweisen.

Das Thema lautet "Ein "funktionierendes" Dropdown-Menü?!" und wenn ich mir die verlinkten Seiten zu den Menüs und Template auf meinen Smartphone ansehe, erfüllt keines die geforderten Parameter.
Sie sind:
- nicht responsive
- nicht bedienfreundlich und das Submenu nicht nutzbar auf Touchgeräten, Smartpones, iPhones, iPads (von Geräten mit IOS 7 ganz zu schweigen)
usw.

@ wsim123: aüßere doch bitte mal konkret deine Wünsche.
Geht es dir um Design, möchtest du ein Multilevel Mega-Dropdown-Menü oder was genau?
Wie weiter oben schon erwähnt, momentan geht es um die Funktion des Menüs, nicht um das Aussehen. Funktioniert das Menü auf allen Geräten, könnem wir uns über die Gestaltung unterhalten, aber jeder mag was anderes.

Darum bitte ich euch nochmals, das Menü auf euren Geräten zu testen und zu berichten, egal ob positiv oder negativ :!:
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

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

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

Post by Holger » Wed Oct 21, 2015 9:00 pm

Hallo Ludwig,
Ludwig wrote:Darum bitte ich euch nochmals, das Menü auf euren Geräten zu testen und zu berichten, egal ob positiv oder negativ :!:
Also ich hab' es jetzt mit allen Geräten die ich zur Verfügung habe getestet: funktioniert einwandfrei. Auch die Version für kleine Viewports / Auflösungen lässt sich super bedienen.
Klasse :!:

Nur das neue Design.... Ok, Geschmackssache und außerdem leicht anpassbar.
Auch der "Slide-Effekt" beim kleinen Menü ist mir schon fast etwas zu viel.

Aber funktional und technisch umgesetzt finde ich es jetzt einwandfrei!

LG
Holger

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

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

Post by lck » Thu Oct 22, 2015 10:34 am

Holger wrote:Also ich hab' es jetzt mit allen Geräten die ich zur Verfügung habe getestet: funktioniert einwandfrei. Auch die Version für kleine Viewports / Auflösungen lässt sich super bedienen.
Klasse
Sehr schön. Danke fürs Testen und deine ehrliche Meinung.
Holger wrote:Nur das neue Design.... Ok, Geschmackssache und außerdem leicht anpassbar.
Auch der "Slide-Effekt" beim kleinen Menü ist mir schon fast etwas zu viel.
Das Design habe ich etwas geändert um optisch einfach einen Unterschied zur vorherigen Version herzustellen, also nur für die Testversion.

Der Slidein-Effekt hat eine praktische Funktion. Ich habe mal eine Version ohne Slidein für menulevel2 online gestellt.
Einfach im Themeswitcher das Template menu_mobil_level2_ohne_slidein auswählen und mit einen Touchgerät mit kleinem Viewport unter 499px testen.

Was passiert (zumindest auf meinem langsamen Smartphone, bei schnellen Geräten evtl. kein Problem und nicht nachvollziehbar):
Tabbt man zum Beispiel auf das Hamburgersymbol bei den Link "DropDownMenü-Testseite", so öffnet sich menülevel2. Soweit ok.
Tabbt man nun auf das Hamburgersymbol bei Link "Welcome to CMSimple_XH" schließt sich das obere Menü und der Link rutscht 3 Zeilen nach oben und sein Üntermenü öffnet sich.
Und nun wird automatisch "Menu Level 2 – Page 3" markiert und das Untermenü menülevel3 geöffnet, da dieser Link genau auf der Stelle liegt, wo vorher der Link "Welcome to CMSimple_XH" war. ;)

Genau dies wird durch das Slidein vermieden. Eventuell kann man die Geschwindigkeit der Transition noch veringern (momentan bei 300ms).
Last edited by lck on Wed Nov 25, 2015 7:34 pm, edited 1 time in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wsim123
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

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

Post by wsim123 » Thu Oct 22, 2015 4:43 pm

Ludwig wrote:
Holger wrote:Hab' ich mir mal angeschaut: hat genau die Schwächen, um die es eigentlich in dem Thread geht.
Genau so ist es, danke!
Was soll ich dazu noch sagen, ausser auf meinen Post von vorgestern verweisen.

Das Thema lautet "Ein "funktionierendes" Dropdown-Menü?!" und wenn ich mir die verlinkten Seiten zu den Menüs und Template auf meinen Smartphone ansehe, erfüllt keines die geforderten Parameter.
Sie sind:
- nicht responsive
- nicht bedienfreundlich und das Submenu nicht nutzbar auf Touchgeräten, Smartpones, iPhones, iPads (von Geräten mit IOS 7 ganz zu schweigen)
usw.

@ wsim123: aüßere doch bitte mal konkret deine Wünsche.
Geht es dir um Design, möchtest du ein Multilevel Mega-Dropdown-Menü oder was genau?
Wie weiter oben schon erwähnt, momentan geht es um die Funktion des Menüs, nicht um das Aussehen. Funktioniert das Menü auf allen Geräten, könnem wir uns über die Gestaltung unterhalten, aber jeder mag was anderes.

Darum bitte ich euch nochmals, das Menü auf euren Geräten zu testen und zu berichten, egal ob positiv oder negativ :!:
Wsim schrieb : Wenn ich schon mal so direkt gefragt werde (ich bin nicht beleidigt) will ich mal meine Meinung zu Ludwigs Menü offen sagen : Seit Zeiten von Windows 8 haben wir ja Kacheln - die mich etwas an Windows 2000 erinnern - eckig und schnell : Bei Microsoft soll ja auch eine eckige Hackordnung herrschen - vielleicht spieglet es die wieder. Ich bevorzuge auf meinem Smartphone Icons ala XP - viele andere auch.
Einer modernen Avatgarde mag ja Ludwigs Menü gefallen - ich würde es genausowenig benutzen wie das Praia Menü der Distribution.
Ein Menü mit sehr langen Listen sieht furchtbar aus - ein Megamenü gibt einen besseren Überblick - es muss nur stehenbleiben.
Das sollte für PHP-Programmierer doch wohl kein Hindernis sein.
Es ist jedenfalls möglich so ein Menü zu programmieren. Auf der Seite von Paragon (https://www.paragon-software.com/de/) ist solch ein modernes Menü.
Also Ludwig : Üben - es ist noch so manches möglich wie ich sagte - und man kann viel dazulernen. Auf universelle-lehre.de habe ich mini1 modifiziert und das geht auch......nur es geht auch besser. Ein Megamenü gab es bisher in der Distribution nicht - wem Ludwigs Menü gefällt der möge es halt nehmen.
http://css3menu.com/css3-multicolumn-blocks-blue.html reicht auch

bzw. https://github.com/black-night/mozilo-2 ... opDownMenu (http://cssmenumaker.com/ )
Wer üben wwill wird auch auf https://github.com/primaryobjects/CssDropdownMenu fündig ( 70 MByte)
Last edited by wsim123 on Tue Oct 27, 2015 9:34 am, edited 1 time in total.

designfjord
Posts: 65
Joined: Fri Apr 16, 2010 4:19 pm
Location: Germany/Franconia

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

Post by designfjord » Thu Oct 22, 2015 9:29 pm

Mit einem Teilaspekts des Themas habe ich mich auch schon mal beschäftigt.

Ich denke, solange ein Kriterium für Megamenüs "Schönheit"/Ausgewogenheit/passende Anordnung der Untermenüs ist (wie das in sehr vielen der angeführten externen Beispielen der Fall ist), kommt man nicht darum herum, entweder das Menü (bei jeder Änderung!) per Hand hinzuzirkeln oder eben die Seiten und Unterseiten "passend" anzulegen.
Beides nicht einfach und nicht benutzerfreundlich.
Eine Algorithmus die Untermenüs je nach Länge passend anzuordnen gibt es zwar im Prinzip, ist mir aber zu kompliziert und vor allem ist das kein Ding eines Themes.

Bei "meinen" Megamenüs (Jahrgang 2012) habe ich wirklich nicht auf mobile Geräte geachtet. Das war damals, in der guten alten Zeit.... :twisted:
XH 1.4, XH 1.5, RealBlog1.5 | OS: XP Win7 Ubuntu | keep it simple

Post Reply