Page 2 of 3

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Jan 30, 2015 11:00 am
by lck
Besten Dank an alle Tester und die Rückmeldungen.

Das mit hover und touch scheint ein großes Thema zu sein. Gibt man das bei Google ein, kommen unzählige Treffer Ratsuchender und Lösungsvorschläge für das Problem. Ich dachte ich hätte mit dem Einbau von :focus und "cursor: pointer" das Problem minimiert, dem ist aber nicht so. Ich bleib dran und wenn von euch jemand eine einfache, am liebsten css-basierte, Lösung hat dann her damit.
svasti wrote:Ich würde allerdings noch den Fall für 2 Menüpunkte nebeneinander einbauen. Und dann würde ich das 3.Level nach rechts öffnen lassen außer bei Menüpunkten am Ende der Leiste -- also genau umgekehrt wie es jetzt ist.
Genau das hatte ich am Anfang der Entwicklung eingebaut, musste aber beim Testen feststellen, dass das auf kleinen Displays zu fummelig wird und dann noch mit hover die einzelnen Levels aufklappen. So finde ich das besser, es gibt nichts schlimmeres wie Besucher oder Kunden, die sich schon am Menü ärgern, die werden sich was Anderes suchen. Außerdem umgeht man so "elegant" das hover/touch Problem.
Aber, wers haben mag, das lässt sich ganz einfach wieder einbauen.
svasti wrote:Die Schriftrichtung ist von links nach rechts, da scheint es natürlicher, wenn Erweiterungen nach rechts öffnen.
Das war auch bei meinen ersten Entwürfen so, aber da sind dann weit mehr Anpassungen zu machen wie es jetzt ist und so ist es eigentlich sehr universal zu verwenden, ohne Änderungen im Stylesheet, also auch bei weniger als 6 Tabs. Getestet habe ich das Ganze mit 13 Tabs, alle mit Level 2 +3.
mhz wrote:Ich habe keine Newsboxen in der Testumgebung; an der Stelle dort (wo eigentlich eine sein sollte) erscheint ein farbiger Balken. Könnte das Template so etwas erkennen und dann nicht auftauchen?
Christoph hat dir ja schon eine Lösung genannt. Die würde ich dir empfehlen, wenn du die Newsboxen mal verwenden willst und mal nicht. In deinem Fall, würde ich sagen, einfach die div-Blocks für die Newsboxen auskommentieren oder sogar komplett löschen. Mach vorher aber ein Backup, falls du es irgendwann wieder brauchst.
Ein andere Möglichkeit wäre mit display: none; in der css-Datei oder im Template mit style="display: none;" die Newsboxen auszublenden.
cmb wrote:Man kann das Menü bedienen, aber es gibt die gleichen Probleme wie beim Adminmenü (tappt man nur kurz, dann wird gleich die Seite aufgerufen, statt das Menü aufzuklappen). Hier aber eigentlich kein wirkliches Problem, weil Mobiles wohl meist weniger als 800px breit sind (bei Retina-Displays wird, soweit ich weiß, umgerechnet), und weil am Ende der Seite ja immer noch das Submenü angezeigt wird, was dann größere Touchscreens berücksichtigt.
Das Problem möchte ich aber noch lösen.
cmb wrote:Die Idee, die Sitemap als Menü für kleine Bildschirmbreiten zu nehmen, finde ich sehr interessant.
Warum das Rad neu erfinden, wenn es schon Räder gibt :)
Wolfgang wrote:Bei wenigen Untermenüpunkten und optisch formatiert ist das ok. Bei so vielen wie hier wäre es sinnvoll die einzelnen Level nacheinander auszuklappen.
Mann könnte das ganze ja noch optisch aufbereiten, aber ich finde weniger ist manchmal mehr! Und gerade bei Smartphones ist mir die Bedienbarkeit/Benutzerfreundlichkeit am wichtigsten. Gut, bei der Testseite wird es eine lange Liste, aber im realem Einsatz wird man nicht so viele h2+h3 Headings haben.
Wolfgang wrote:Wenn der Viewport so breit ist, dass alle Hauptmenüpunkte nebeneinander liegen ist alles gut.
Liegen die Hauptmenüpunkte in zwei Reihen und man klickt einen oberen an, überdeckt das Untermü andere Menüpunkte, was sehr verwirrend wirkt. Eine seitliche Absetzung würde sich da gut machen.
Guter Vorschlag. Andererseits, ein zu großer Versatz verursacht dann evtl. wieder Probleme bei geringer screen-Weite. Das muss ich mal testen.
Wolfgang wrote:Auf dem Tablet im Querformat: Die aufgeklappten Menüpunkte reichen nicht über den Header hinaus (Inhaltsbereich bleibt frei), sodass maximal 1 Untermenüpunkt angezeigt wird.
cmb wrote:Bei mir (Android mit Google Chrome) werden alle Unterpunkte angezeigt.
Wolfgang wrote:Stimmt. Ich hatte es mit dem Androit Standardbrowser getestet.
Finde ich gut, dass du es mit Standardbrowser getestet hast, evtl. gibt es ja auch noch andere Browser, die das gleiche Problem haben.
Das sieht mir nach einem Ebenen-Problem aus, aber das müsste mit der Vergabe von z-index behebbar sein.

Werde dann in den nächsten Tage eine überarbeitete Version online stellen. Also bitte weiter testen.

Ich könnte mir auch vorstellen, das Menü als Template-"Addon" zu veröffentlichen. Somit könnte man relativ einfach Menüs austauschen.
Eventuell ist sowas auch für andere Bereiche der Templates interessant, z.B. bei Newsboxen, Footer usw., so eine Art Baukasten-System :?:

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Jan 30, 2015 11:11 am
by mhz
Ich benutze ein Blackberry Bold 9900 mit einem Touch-Display von 640x480 Pixeln.
Login und Logout funktionieren gut.
Wenn ich das horizontale Menü mir anschaue, so sind die Balken im Display alle untereinander angeordnet. Fahre ich mit dem Cursor oder dem Finger darüber, ändert sich die Farbe zu einem marine-blau. Erst wenn ich die Schrift darin anklicke, werde ich zu der entsprechenden Seite weitergeleitet.
Danach kommt dann der Seitentitel. Darunter, wieder als Balken, kommt das (im PC auf der rechten Seite erscheinende) Navigationsmenü.
Wenn ich das vertikale Menü mir anschaue, so sind die Balken im Display untereinander angeordnet. Fahre ich mit dem Cursor oder dem Finger darüber, ändert sich die Farbe des Balkens nicht. Die Farbe der Schrift wechselt von weiß zu gelb. Wieder: Wenn ich die Schrift darin anklicke, werde ich zu der entsprechenden Seite weitergeleitet.

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Jan 30, 2015 12:04 pm
by lck
Hallo mhz,

du testet gerade dasTemplate SimpleCrazy und nicht das SimpleCrazyX
mhz wrote:Ich habe gerade mal (auf die Schnelle) simplecrazy ausprobiert.
Da scheint mir alles normal zu funktionieren. Siehe hier, so sollte es aussehen.

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Jan 30, 2015 1:55 pm
by cmb
Ludwig wrote:Das mit hover und touch scheint ein großes Thema zu sein. Gibt man das bei Google ein, kommen unzählige Treffer Ratsuchender und Lösungsvorschläge für das Problem. Ich dachte ich hätte mit dem Einbau von :focus und "cursor: pointer" das Problem minimiert, dem ist aber nicht so. Ich bleib dran und wenn von euch jemand eine einfache, am liebsten css-basierte, Lösung hat dann her damit.
Ja, :hover bei Touch-Bedienung ist sicher ein großes Thema. Ich habe mir gestern schon einige Gedanken zu dem Thema gemacht, und fürchte, da gibt es keine wirkliche Lösung. Eigentlich verrückt: seit ein paar Jahren ist CSS endlich soweit, dass man auch ohne JavaScript vernünftige Drop-Down-Menüs machen kann, und nun kommen die Touch-Devices, und damit klappt es nicht mehr wirklich gut. Aber wie auch? Soll Tappen den Link auslösen, oder nur dessen :hover setzen?

Nun ist aber Touch-Bedienung nicht das einzige Problem von Drop-Down-Menüs. Wie mir seit gestern klar ist, ist die Tastaturbedienung noch problematischer, und auch wenn diese ungewöhnlich ist, sollte man sie nicht ignorieren. Schließlich gibt es Menschen, die keine Maus bedienen können, und bisweilen ist auch einfach mal keine Maus verfügbar. Und während man mit Touch-Geräten durch langes Drücken das :hover triggern kann (bin nicht sicher, ob das mit allen Browsern möglich ist), geht das mit der Tastatur wohl überhaupt nicht. Letztlich sollte man daher wohl immer noch alternative Navigationsmöglichkeiten anbieten, wie eben z.B. per submenu().

Was mir bei meinen Tastaturtests bei SimpleCrazyX aufgefallen ist, ist dass es keinen visuellen Feedback gibt, welcher Link gerade fokusiert ist (zumindest unter Chrome 40, Firefox 35 und IE 11). Das liegt wohl an:

Code: Select all

a:link, a:visited {outline: 0} 
Auch wenn das Outline optisch nicht schön ist, ist es doch eine wertvolle Hilfe für die Tastaturnavigation. Und bei Maus- und Touch-Bedienung bekommt man es sowieso nicht zu sehen. Alternativ könnte man natürlich auch a:focus stylen.

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Feb 06, 2015 2:24 pm
by lck
Habe gerade eine neue Version des Templates SimpleCrazyX online gestellt.
Einige Vorschläge habe ich dabei umgesetzt. Christoph hat ein script für das hover-touch-Problem bei mobilen Browsern erstellt. Besten Dank.
Bitte die Navigation mal testen, vor allem mit Tablets.

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Mar 13, 2015 9:05 am
by olape
Hallo,

vielleicht habe ich es überlesen und es steht schon in einem Beitrag, aber trotzdem, unter Safari (iOS) funktioniert das Menü nur soweit, wie keine H1 aktiv ist.
Wenn man einen H1 Menüpunkt aufgerufen hat, also kein Link mehr dahinterliegt, kommt auch kein Menü für H2 bzw. dann auch H3 mehr.

Ich habe bei einem Template, an dem ich gerade arbeite, das gleiche Problem und habe bisher auch keine Lösung finden können.

Das einzige was mir i.M. dazu einfällt, auch bei aktiver H1 müsste der Punkt mit einem Link hinterlegt sein.
Ich habe das nicht getestet, aber das ist ja der einzige Unterschied.

Beim alten CMSimple hatte ich das mal so, ob das bei XH so einfach zu ändern ist weiss ich noch nicht.

Gruss Olaf

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Mar 13, 2015 9:31 am
by olape
Also mit dieser Änderung (H1 immer als Link) funktioniert das Menü dann auch unter iOS, jedenfalls bei mir.
Aber schöner wäre natürlich, es gäbe eine andere Lösung, da das bei jedem Update wieder neu zu ändern wäre.

Gruss Olaf

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Mar 13, 2015 2:40 pm
by lck
olape wrote:unter Safari (iOS) funktioniert das Menü nur soweit, wie keine H1 aktiv ist.
Wenn man einen H1 Menüpunkt aufgerufen hat, also kein Link mehr dahinterliegt, kommt auch kein Menü für H2 bzw. dann auch H3 mehr.
Mit Safari unter IOS konnte ich das Template nicht testen. Getestet hatte ich es nur mit dem IE 11 Emulation-Tool, Benutzer-Agent "Apple Safari (iPad)" und da gab es keine Probleme.

Es gibt/gab ein Plugin XTOC, das solch eine Funktion bereitstellt. Das Plugin sollte aber eigentlich nicht mehr verwendet werden.

Auszug aus der XTOC Hilfe-Datei:
(3)
geklickte Knöpfe sind inaktiv. Sie können nicht mehr angeklickt werden. Manche CSS Layouts benötigen für bestiimte Funktionen allerdings, dass auch angeklickte Knöpfe noch anklickbar bleiben. Diese Funktion ermöglich das.
Ein ähnliches, aktuelles Plugin, wäre Toxic_XH, aber ich glaube die Funktion, dass auch angeklickte Knöpfe noch anklickbar bleiben, ist darin "momentan" noch nicht enthalten.

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Mar 13, 2015 3:06 pm
by cmb
olape wrote:Also mit dieser Änderung (H1 immer als Link) funktioniert das Menü dann auch unter iOS, jedenfalls bei mir.
Um welche Version von Safari handelt es sich denn? Anscheinend verstehen ältere (?) Safari-Versionen unter iOS (?) :hover nur bei Anker-Elementen. Das gleiche Problem wurde nämlich vor einer ganzen Weile für das Plugin-Menü von XH gemeldet.
Ludwig wrote:Ein ähnliches, aktuelles Plugin, wäre Toxic_XH, aber ich glaube die Funktion, dass auch angeklickte Knöpfe noch anklickbar bleiben, ist darin "momentan" noch nicht enthalten.
Stimmt leider.
Ludwig wrote:Es gibt/gab ein Plugin XTOC, das solch eine Funktion bereitstellt. Das Plugin sollte aber eigentlich nicht mehr verwendet werden.
Seit CMSimple_XH 1.6.3 kann man die Variante 3 von xtoc leicht mit ein paar Zeilen Code zu Beginn des Template nutzen. Bei Bedarf kann ich gerne noch den nötigen Code bereit stellen, dass ein solches Template auch unter älteren CMSimple(_XH) Versionen genutzt werden kann -- dann eben mit xTOC28 als Fallback.

Re: Tester gesucht für neues Template mit horizontalem Menü

Posted: Fri Mar 13, 2015 8:54 pm
by olape
Hallo,

Getestet habe ich unter iOS 8.1.3, Safari 600.1.4. Also fast aktuell.

In allen anderen üblichen Browsern für Windows, jeweils die aktuellste Version habe ich auch getestet,
Auch die letzten Safari-Version für Windows, funktioniert überall problemlos.

Nur eben unter IOS funktioniert es nicht ohne einem permanenten Link.
Übrigens nur eine ganz kleine harmlose Änderung.

Gruss Olaf