Smart Responsive Layout - Dropdown Problem

swork

Hallo ZETA

Ich nutze die Einstellung "Position Oben" für das Dropdown Menü, um ein wenig Abstand
vom Hautbutton zu erhalten. Dies führt aber zu dem Problem, das dass Dropdown Menü
verschwindet, sobald man den Mauszeiger zum Dropdown Menü bewegt.

[Blockierte Grafik: http://united-host.eu/zeta/dropdown3.jpg]

Da ich auf anderen Webseiten die Dropdowns ebenfalls nach unten versetzt und sogar seitlich verschoben habe, ohne dieses
Problem, scheint es ein Bug zu sein.

Beispiel das es geht.

[Blockierte Grafik: http://united-host.eu/zeta/dropdown4.jpg]

Steffen T.

Hallo,

nein, das ist kein Bug. Das Dropdown-Menü sollte immer bündig mit den Hauptpunkten sein.

swork

Hallo Herr T.

Ich denke mal Sie meinen explizit dieses Layout, denn generell muss das Dropdown Menü nicht bündig sein, um zu funktionieren.
Ich finde einen kleinen Abstand besser als das Bündige in diesem Layout. Das sieht dann so aus:

[Blockierte Grafik: http://united-host.eu/zeta/dropdown6.jpg]

Gehe ich da nur 1 PX nach unten, funktioniert das Menü schon nicht mehr im IE10, oder ich muss die Maus schnell nach unten ziehen.

Wie dem auch sei, es betrifft nur dieses Layout und die Einstellung "Position oben" hat ja auch nur Sinn, wenn man sie benutzen kann,
also das Dropdown in der Position verändern, wobei es noch funktionieren sollte.

Sie könnten es einfach funktionierend machen, indem Sie einen Delay einbauen mit

"transition: all 0.5s ease-in-out 3s;"

So bleibt das Menü eine Zeit lang stehen, sobald man den Mauszeiger über den Abstand nach unten zum Dropdown Menü bewegt und
man muss ihn nicht mit hoher Geschwindigkeit nach unten ziehen. Dann macht auch die Einstellung "Position" wieder Sinn und das Menü
sieht so schöner aus.

Ich habe hier mal eine Demo gemacht, wie das dann mit einem Abstand zum Hauptbutton funktioniert. Erst wenn man mit dem Mauszeiger
etwas länger, direkt unter dem Hauptbutton, verweilt, schliesst sich das Dropdown Menü. Habe den Abstand hier mal etwas grösser gewählt.
Im Layout reicht ja schon ein Abstand von 1 Px das dass Menü kolabiert.

DEMO

Stefan S

Hallo,

vielen Dank für die Phantastische Demo!
Das "hover"-Problem kann man mit einer Transition lösen. Allerdings funktioniert das dann nur in Browsern, die CSS3-Transitions unterstützen. Andere Browser müsste man dann durch zusätzliches JavaScript unterstützen und das wollten wir dafür nicht in Kauf nehmen. Wir müssen halt manchmal für größt mögliche Kompatibilität ein paar Kompromisse eingehen.
Ihre Lösung ist aber mit den meisten modernen Browsern funktional und Sie können dass ja sogar über eine zusätzliche CSS-Regel in einem Attribut sehr einfach einbauen.

swork

Hallo Herr Seiz

>vielen Dank für die Phantastische Demo!
Mmm, das verstehe ich jetzt hoffentlich nicht falsch. Ist das ironisch gemeint ?

Ok, das sie an größt mögliche Kompatibilität denken, das kann ich natürlich nachvollzeihen. Wofür ist die
Einstellung "Position Oben" gedacht, wenn ich sie doch nicht nutzen kann? Habe ich ein einfaches
Dropdown, dann liegt es von Hause aus bündig an und braucht keine Positionseinstellungen. Bei
diesem Layout hatte ich gedacht, ich könnte das so machen wie gewohnt. Ich brauch ja nur 1 Px Abstand, denn
beim Firefox 28 ist das Dropdown nicht bündig, sondern liegt auf dem Hauptbutton auf (Überlappt).

Im Travel Layout haben Sie das genauso gemacht, wie ich das haben möchte. Da scheint es zu funktionieren und
es gibt keine Positions Einstellung und das Dropdown kollabiert nicht sobald man mit dem Mauszeiger nach unten geht.

Da ist ein Delay eingetragen und Javascript.

[Blockierte Grafik: http://united-host.eu/zeta/dropdown7.jpg]

Ich habe mal im Script einen grösseren Abstand eingestellt und es funktionierte immer noch.

Vielleicht können sie mir ja helfen was für CSS Zeilen ich noch zusätzlich einfügen und wo ich genau ich
diese eintragen muss, damit es so gut funktioniert wie im Travel Layout.

Ich habe ja schon einige Seiten mit Zeta gemacht und bin sonst auch ganz zufrieden damit.

Stefan S

Hallo,

nein, mein Kompliment war keinesfalls ironisch gemeint. Ich fand es klasse, dass Sie sich eine solche Mühe gemacht haben, uns den Sachverhalt zu veranschaulichen. Das ist für uns immer sehr hilfreich.

Sie könnten Sich bei diesem Layout folgendermaßen behelfen:

Klicken Sie im Menü Website auf "Erweitert > Attribute"
Stellen Sie sicher, dass unten links im Button "Attribute" die Option "Alle anzeigen" angehakt ist
Doppelklicken Sie nun in der Liste der Attribute unter "Standard" auf das Attribut "mobile_script"
Fügen Sie folgende Textzeilen ein und schließen Sie den Dialog dann mit Klick auf "OK"

Code

<style>
  ul#navigation ul{transition: all 0.5s;}
</style>

Nun können Sie auch das Fenster "Globale Attribute schließen. Wenn Sie nun alle Seiten neu erstellen, haben Sie das von Ihnen hier gepostete Delay auf das Menü angewandt und der Mouseover sollte wie erwartet funktionieren (in den modernen Browsern).

Das Layout Travel ist schon älter und da wurde eine entsprechende JavaScript-Lösung verwendet. Das wollen wir bei den moderneren Layouts so nicht mehr machen.

swork

Hallo Herr Seiz

>nein, mein Kompliment war keinesfalls ironisch gemeint. Ich fand es klasse, dass Sie sich eine solche Mühe gemacht haben,
>uns den Sachverhalt zu veranschaulichen. Das ist für uns immer sehr hilfreich.

Ja gut, dann sage ich danke.

Ich sage auch danke für die erfolgreiche Unterstützung in dieser Sache. Es hat super funktioniert und da die meisten
Browser das unterstützen, ist das für mich so OK. In der Sidebar werden die Menüs ja auch noch angezeigt.

Man kann jetzt problemlos den Mauszeiger nach unten bewegen, ohne das dass
Menü verschwindet

[Blockierte Grafik: http://united-host.eu/zeta/menue.gif]

Ich bedanke mich erneut für den tollen Support. Hat alles wunderbar geklappt

Smart Responsive Layout - Dropdown Problem

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?