CSS Elementor – Dropdown-Menü, statt Flyout

[Emskerla]

Liebe Gemeinschaft,

ich erstelle im Moment mit Elementor eine kleine Website. Was CSS betrifft, habe ich in den vergangenen Jahren eigentlich alles durch ausprobieren hinbekommen. Nun stoße ich an meine Grenzen (und Elementor auch, laut Pro-Support bietet der Page Builder diese Funktion nämlich nicht):

Ich habe ein Dropdown- beziehungsweise Flyout-Menü fertig, möchte daraus nun jedoch ein Menü wie im Anhang machen (siehe Punkt FAQ). Natürlich OnHover/OnClick. Einzige Möglichkeit (neben Bezahl-Plugins) ist CSS.

Kann mich jemand auf die richtige Spur führen?

Vielen Dank im Voraus

 

[CooperakaTigger]

Hi Emskerla,

im Prinzip funktioniert das genau wie mit dem Dropdown menü. Was du allerdings nicht willst ist das der Inhalt des 'Dropdown'-Blocks absolut positioniert wird.

Hier hab ich mal ein minimal beispiel gemacht: https://jsfiddle.net/s10p59jy/5/

hoffe das hilft dir weiter

 

[Emskerla]

@CooperakaTigger

Vielen Dank und sorry für die späte Rückmeldung: Ich bin aktuell stark Erkältet.

Habe gerade nochmal zwei Stunden investiert. Und glaube auch zu wissen, was Du da machst: Zunächst die verschachtelte Liste (also das Submenü) ausblenden ul ul, dann bei hover wieder mit display:block; einblenden. Warum auch immer, bei mir funktioniert das nicht.

Meine Vermutung ist: Die ganze Ausklapp-Funktionalität ist JavaScript.

Ich habe mich dann noch an einem Workaround probiert, indem ich versucht habe, benutzerdefinierte @Media-Queries zu schreiben: Denn das von mir gewünschte Menü existiert ja bereits – es wird aber nur auf dem Handy angezeigt. Zunächst versuchte ich hierbei, das gesamte "Desktop-Menü-Element" auszublenden (funktioniert) und dann das gesamte "Mobile-Menü-Element" auf dem Desktop einzublenden – das funktioniert, von der Logik her, natürlich, nicht.

 

[CooperakaTigger]

Dann hoffe ich mal das es dir bald besser geht!

Ich hab in deinem ersten Post völlig überlesen das du Elementor verwendest, sorry dafür. Dann bringt die die reine CSS Lösung wirklich nichts.

Wenn du das mobile Menü auf deinem Desktop sehen willst um mit den Entwicklertools gucken zu können, kannst du mit besagten Tools einen Mobilen Ansicht Modus starten (unter Chrome zumindest). Das ganze nennt sich Device Toolbar. Dann kannst du prüfen wir deine Website auf mobilen Geräten aussieht und auch das mobile Menü genauer angucken.

Wenn du dein Projekt verlinken kannst kann ich auch mal drauf schauen. Ansonsten weiß ich leider gerade nicht wie ich die weiter helfen kann :/

 

[Emskerla]

Öffentlich ist vielleicht etwas doof, ich schicke Dir eine PN.