flat responsive menü mobile Ansicht

    Hallo Stefan,


    in der mobilen Ansicht vom flat responsive Layout werden die Menüpunkte über die gesamte Darstellungsbreite des mobilen Gerätes angezeigt. Um auf eine Unterseite zu wechseln muss ganz rechts auf den Pfeil gedrückt werden. Hier ergibt sich das Problem, wenn man nur die Schaltfläche drückt man nicht auf die Unterseite wechseln kann, sondern man auf dem Menüpunkt landet, den man ausgewählt hat, aber nicht eine Ebene tiefer - insofern man nicht diesen kleinen Pfeil getroffen hat.

    Mir wäre sehr geholfen, wenn der aktive Bereich des Pfeiles nach links in Richtung Menütext verschiebbar und somit weiter links aktive wäre oder zumindest die Breite des Navigationspfeiles für das Wechseln auf die Unterseite breiter ist. Denkbar ist auch (obwohl die Darstellung über die gesamte Breite beim mobilen Gerät sehr angenehm aussieht), dass die Breite der Schaltfläche bis an den Text reduziert wird (wird dann je nach Anzahl der Zeichen unterschiedlich breit sein) und man so zwangsläufig den Pfeil besser trifft. Ich habe zum Teil kurze Worte als Menütext - und der Pfeil rechts ist sehr weit entfernt.

    Ich wäre Dir sehr dankbar für ein paar Tipps diesbezüglich, denn dieses Layout mag ich ob seiner Schlichtheit sehr, abgesehen davon, dass ich Zeta Producer seit Jahren gerne werde.

    Besten Dank im Voraus!

    Herzliche Grüße Andreas

    Hallo,

    das ist nicht ganz trivial, weil Klicks auf den Pfeil ausschließlich per JavaScript ausgewertet werden. Mit dem folgenden angepassten CSS können Sie den Raum zwischen Seitenname und Pfeil aber vergrößern (von 3em auf z.B. 4em). Der leere Raum zwischen Seitenname und Pfeil ist ja ebenfalls anklickbar und vergrößert dadurch den klickbaren Bereich.

    • Klicken Sie im Menü Website auf "Einstellungen"
    • Klicken Sie auf CSS
    • Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"
    CSS
    1. <style>
    2. #header #nav li.haschilds>a,
    3. #header #nav .dropdown-menu li.haschilds{
    4. padding-right: 4em; /* Abstand zum Pfeil von 3em auf 4em vergrössern */
    5. }
    6. #header #nav li.haschilds>a:after,
    7. #header #nav .dropdown-menu li.haschilds>a:after{
    8. right: 3em; /* Abstand des Pfeil von rechts auch vergrößern, damit der Pfeil etwas nach links rutscht */
    9. }
    10. </style>

    Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

    Hallo Stefan, hallo Zeta Producer Team,


    danke für Ihre rasche Antwort!

    In der Desktop-Ansicht rutscht der Pfeil deutlich nach links, aber in der Desktop-Ansicht ist das Problem nicht. Dort funktioniert von Anfang an die Navigation perfekt.

    Das Problem ist in der mobilen Ansicht ab Sandwich-Menü z.B. auf Smartphone. Da bleibt der Pfeil unverändert rechts und ja richtig, der Bereich für den Pfeil hat sich vergrößert, aber das muss dann der Benutzer wissen, denn er steht ja ganz rechts).

    Bei Desktop-Auflösung achte ich auf genügend Spielraum beim Hauptmenü, dass es nicht auf die Sandwich-Menü-Darstellung umschaltet, denn dann sind die Schaltflächen extrem breit und das sieht wirklich nicht gut aus!

    Vermutlich muss ich das anders lösen und leider keine weiteren Ebenen nach unten anlegen. Das war allerdings bei Web-Feeds ziemlich geschickt. Vielleicht wird es irgendwann für die mobile Ansicht unterhalb des Sandwich-Menüs, für die Schaltflächenbreite, eine Einstellmöglichkeit geben.

    Ich verwende ZP15 und finde es klasse, dass man in der Darstellung eine Vorschau auch für mobile Geräte hat, die inzwischen bei mir das Maß für die Gestaltung ist, zudem ich die Breite der Webseite auf FullHD, also 1920 eingestellt habe - möchte den Bildschirm mit nicht nur einem Hintergrundbild ausfüllen.


    Beste Grüße

    Andreas U.

    Ich verstehe noch nicht so ganz, was nun noch fehlt oder nicht genügend verbessert wurde. Hat der Code nun eine Vergrößerung des klickbaren Bereichs in im Hamburger-Menü bei Ihnen erzielt oder nicht. Wenn ja, dann ist doch alles OK? Der Benutzer muss doch nicht wissen, wie groß der klickbare Bereich ist, sondern nur dass er mit dem ☞ auf den Pfeil tippen muss und der Bereich zum tippen muss halt groß genug sein, dass er den Pfeil auch erwischt…

    Ja das ist richtig und die Verbesserung ist auch erzielt. Dafür danke ich Ihnen. Aber: wenn der Benutzer auf eine Unterseite wechseln will (dazu auf den Pfeil drücken müsste) kann der Pfeil übersehen werden, da er immer noch ganz rechts steht (auch wenn der klickbare Bereich für den Pfeil etwas größer ist). Wenn im Sandwich Menü, aber nur in diesem auch optisch nach linkts rutschen würde, wäre das klasse. Im Sandwich Menü ist der Pfeil optisch nicht nach links gewandert (in der Desktop Darstellung aber deutlich nach links; hier aber wäre das gar nicht notwendig.) Jetzt kann es sehr wahrscheinlich sein, eben da der Pfeil ganz rechts steht, dass der Benutzer doch bereits in den großen freien Bereich der Schaltfläche drückt, denn im Verhältnis dazu ist links der Text relativ kurz und somit könnte man optisch wahrnehmen, dass man zum Schalten auf eine Unterseite schon ziemlich in der Mitte drücken kann, was aber nur die entsprechende Seite auswählt). Wenn der getrennt klickbare Bereich rechts beim Pfeil nicht nur durch den Pfeil Symbolisiert wird, sondern z.B. auch durch eine andere Hervorhebung z.B. Farbe, dann wäre das noch eindeutiger. Die Klickbereichsbreite.... Ja ich weiß, ich jammere auf hohem Niveau, aber trotzdem...Also eine optische zum Pfeil zusätzliche Hervorhebung der beiden getrennten Bereiche, das wäre optimal. :)

    Sie und ich wissen, dass man nahe genug am Pfeil drücken muss - die allgemeinen "Klicker" unter Umständen aber nicht und werden immer wieder nur auf der Seite landen, die auf dem "Klickbalken" angezeigt wird und nicht eine Ebene tiefer. Naja, an das Sandwich Menü haben sich ja Anwender inzwischen auch gewöhnt zudem noch das Wort Menü ausgeschrieben steht, vielleicht auch mal an den dezenten Pfeil.

    Sollte Ihnen noch was einfallen in der Darstellung zum Klick auf eine Unterseite, dann wäre das klasse.

    Ansonsten bedanke ich mich recht herzlich für Ihre geleistete kompetente Unterstützung und grüße Sie

    Andreas U.