Hallo zusammen, ich versuche das Menü so zu gestalten, dass beim hovern der gesamte Hintergrund schwarz/transparent wird, wie etwa wenn man den Warenkorb aufruft. So sieht es aktuell im Testshop aus: Es soll dieser Effekt eintreten, wenn man die Kategorien aufruft, wie oben zu sehen: Es ist quasi nur über dem Warenkorb kein Overlay. Der Rest ist verdunkelt. Sowas habe ich zuletzt versucht: Code: .dropdown.level-1-child.mouse.open.flyout-right #offcanvas-cart-overlay { display: block !important; opacity: 0.7 !important; } Leider funktioniert es nicht. Was übersehe ich? Vielen Dank vorab! Hier nochmal ein Beispiel, wie ich es gerne hätte: (Link nur für registrierte Nutzer sichtbar.) (Einfach die Kategorien überfliegen)
Ein kurzer Blick in die Entwicklerwerkzeuge zeigt: Bei Klarna wird per Javascript ein neues DIV im DOM erstellt, wenn der Mauszeiger über dem Menü ist: HTML: <div class="sc-jdkBTo fPnSHO"></div> Und das ist der CSS-Code dafür: Code: .fPnSHO { background: rgba(0, 0, 0, 0.3) none repeat scroll 0% 0%; position: absolute; top: 0px; left: 0px; right: 0px; height: 100vh; animation: 0.2s linear 0s 1 normal forwards running LJWJg; }
Vielen Dank, aber ich denke, dass es auch nur mittels CSS funktioniert. Geht bei Gambio ja auch, wenn man den Warenkorb öffnet. Würde jetzt ungern noch nen Script einbringen. Vielleicht hat jemand noch eine Idee, wo ich einen Fehler mache?
Da wird aber auch via JavaScript dem body eine Klasse hinzugefügt. Probier's mal damit: Code: li.dropdown.level-1-child.flyout-right.mouse.open::before { content: ''; display: block; width: 100%; height: 100vw; position: fixed; background: rgba(0, 0, 0, 0.3); top: 0; left: 0; }
Besten Dank, das bringt mich schon wesentlich weiter. Ich spiele noch ein wenig damit rum. Es gibt noch zwei Probleme. 1. Das Background verschwindet nicht, wenn man mit dem "hovern" der Kategorie fertig ist. 2. Der Background gilt für die ganze Seite, soll aber direkt nach dem #header bzw. nach #categories anfangen, sodass quasi der Header inkl. Navbar nicht verdeckt werden. Hier hab ich dann versucht, "top: 150px" einzustellen, was aber nicht funktioniert, weil beim scrollen wird der header ja kleiner und bei mir bleibt nur die Kategoriezeile sticky. Vielleicht muss ich da was mit calc(blabla) versuchen. Lese mich da noch rein Hier im Testshop kannst Du sehen, wie es sich aktuell verhält: (Link nur für registrierte Nutzer sichtbar.)
Dann muss ich dafür wohl oder übel auch Java verwenden. Für eine Lösung wäre ich dankbar. Selbstverständlich auch gegen Bezahlung, wenn Du mir ein Angebot dafür schickst.