Menü-Look und Animation einer anderen Website auf Shopify nachbauen (ohne Code zu kopieren)

Sie besuchen einen Onlineshop, bewegen den Mauszeiger über eine Menükategorie, und die Navigation gleitet mit eleganter Leichtigkeit auf. Es ist völlig verständlich, dass Sie dieses hochwertige Gefühl auch in Ihrem eigenen Shopify-Store bieten möchten.

Viele Händler versuchen zunächst, CSS-Codezeilen aus Community-Foren zu kopieren oder Skripte aus der fremden Website zu extrahieren. Fast immer schlägt dieser Versuch fehl: Das Menü springt ruckartig auf, flackert beim Neuladen der Seite einmalig auf oder schließt sich nicht mehr, wenn der Cursor das Menü verlässt.

Sie können und sollten den privaten Code einer anderen Website nicht kopieren. Sie können jedoch ein ähnliches Gefühl in Ihrem eigenen Shop nachbauen. Sobald Sie die Bewegung benennen, ihr Timing im Browser messen und verstehen, wie Shopify-Themes interaktive Zustände handhaben, wird die Nachbildung dieses Erlebnisses zu einem systematischen Prozess.

Quick answer: how to replicate another website’s menu animation

Um die Menü-Animation einer anderen Website auf Shopify nachzubauen, kopieren Sie nicht deren Code. Benennen Sie den Menütyp und die Bewegung, beobachten Sie das Verhalten in den DevTools Ihres Browsers, um Dauer, Easing und Trigger zu notieren, und bauen Sie dieses Gefühl anschließend mit Ihren Theme-Einstellungen, einem Entwickler oder einer Menü-App nach.

1. Menütyp benennen: Bestimmen Sie, ob es sich um ein mehrspaltiges Mega-Menü, ein einspaltiges Dropdown, ein seitliches Drawer-Menü oder eine mobile Tab Bar handelt.
2. Bewegung und Trigger identifizieren: Stellen Sie fest, ob das Panel einblendet (Fade), gleitet (Slide) oder aufklappt (Expand), und ob die Auslösung per Hover oder per Klick erfolgt.
3. Dauer und Easing in den DevTools erfassen: Öffnen Sie das Animations-Panel Ihres Browsers, um Timing und Übergangskurve zu erfassen (Chrome DevTools).
4. Implementierungsweg wählen: Entscheiden Sie, ob Sie Theme-Code bearbeiten, einen Entwickler beauftragen oder fertige Effekte in einer Menü-App konfigurieren möchten.
5. Auf Mobilgeräten und mit reduzierter Bewegung testen: Prüfen Sie flüssige Touch-Reaktionen und stellen Sie sicher, dass Nutzer mit reduzierter Bewegungsvorgabe nicht überfordert werden (MDN prefers-reduced-motion).

Streben Sie immer nach demselben Interaktionsgefühl, nicht nach identischem Quellcode.

Step 1: Name the menu type and the motion

Bevor Sie in Theme-Einstellungen suchen oder ein Briefing für einen Entwickler verfassen, benötigen Sie präzise Begriffe. Eine allgemeine Beschreibung wie „dieser weiche Effekt“ führt im Forum oder beim Entwickler zu Missverständnissen. Teilen Sie Ihre Beobachtung in zwei Komponenten: den strukturellen Container und das Bewegungsmuster.

Menu type

Erkennen Sie zunächst die grundlegende Struktur. In der standardmäßigen Shopify-Navigation kann ein Hauptelement bis zu zwei verschachtelte Dropdown-Ebenen enthalten, wobei die genaue Darstellung und Positionierung vom verwendeten Theme abhängt (Shopify Help Center). Typische Varianten sind:

• Dropdown-Menü: Eine kompakte, einspaltige vertikale Liste, die sich direkt unterhalb des übergeordneten Links öffnet.
• Mega-Menü: Ein breites horizontales Panel, das sich über die gesamte Bildschirmbreite erstreckt und mehrere Kategoriespalten, Produktbilder und Aktionsbanner präsentiert. Wenn Sie das gesamte Layout eines Vorbilds adaptieren möchten, lesen Sie unseren Leitfaden, wie Sie Ihr Menü wie eine Theme-Demo gestalten.
• Drawer-Menü (Mobiles Menü): Ein seitliches Navigationspanel, das nach Antippen eines Hamburger-Icons von links oder rechts hineingleitet.
• Tab Bar: Eine feste Navigationsleiste am unteren Displayrand von Smartphones für schnellen Daumenzugriff auf Hauptkategorien.
• Icon-Menü: Eine visuelle Navigationsreihe mit runden oder quadratischen Symbolen über kurzen Kategoriebeschriftungen.

Motion type

Beobachten Sie nun, wie das Untermenü sichtbar wird. Öffnet es sich bereits, wenn der Mauszeiger über den Link bewegt wird (Hover), oder erfordert es einen Klick? Welche sichtbare Transformation findet statt?

Achten Sie darauf, ob die Bewegung zwei Aktionen kombiniert. Manche Menüs verbinden ein leichtes Abwärtsgleiten mit einem gleichzeitigen Einblenden per Opacity. Diese beiden Merkmale liefern Ihnen eine klare Vorlage für den Nachbau.

Step 2: Watch the animation in DevTools

Statt minifiziertes JavaScript zu durchforsten, können Sie die Animation direkt mit Ihrem Browser analysieren. Integrierte Entwicklertools bieten eine Bild-für-Bild-Ansicht jeder animierten Bewegung.

Bewegung verlangsamen und wiederholen

Klicken Sie in Google Chrome mit der rechten Maustaste auf ein beliebiges Element der Vorbild-Website und wählen Sie Untersuchen (Inspect). Drücken Sie die Taste Escape, um die untere Konsole einzublenden, klicken Sie auf das Drei-Punkte-Menü links und wählen Sie unter More tools den Eintrag Animations.

Das Animations-Panel der Chrome DevTools dient genau dazu, eine Animationsgruppe zu verlangsamen, erneut abzuspielen oder ihren Quellcode zu untersuchen (Chrome-DevTools-Dokumentation). Nutzen Sie die Geschwindigkeitssteuerung, um die Wiedergabe zu verlangsamen. Fahren Sie nun mit der Maus über den Menüpunkt oder klicken Sie darauf. Die DevTools zeichnen die Interaktion auf und stellen die Animations-Zeitleiste als Block dar.

Dauer, Easing und Trigger notieren

Im Animations-Panel können Sie Timing, Verzögerung, Dauer oder Keyframe-Abstände von Animationsgruppen untersuchen und anpassen (Chrome DevTools Animations). Klicken Sie auf den Balken, um die zugrunde liegenden CSS-Werte abzulesen.

Gemäß offizieller CSS-Spezifikation werden nur diejenigen Eigenschaften animiert, die explizit in der Transition-Regel aufgeführt sind; jeder Übergang umfasst vier Komponenten: Eigenschaftsname, Dauer, Timing-Funktion und Verzögerung (MDN CSS Transitions).

Notieren Sie drei konkrete Werte:

1. Dauer: Die Zeitspanne der Öffnungsbewegung, in Millisekunden oder Sekunden.
2. Easing (Timing-Funktion): Die Beschleunigungskurve. Übliche Werte sind ease-out (beginnt rasch, federt sanft aus), ease-in-out (weicher Start und sanfter Stopp) oder eine benutzerdefinierte Cubic-Bezier-Kurve.
3. Animierte Eigenschaften: Die tatsächlichen CSS-Eigenschaften im Wandel—meist opacity, transform (wie translateY) oder max-height.

Diese drei Zeilen genügen. Ihr Ziel ist eine präzise Notiz für den Nachbau auf Shopify, keinesfalls das Kopieren fremden Codes.

Why pasted CSS transitions often don’t work on Shopify themes

Eine häufige Frustration von Shopify-Händlern: Sie finden in einem Forum einen CSS-Transition-Code, fügen ihn dem Stylesheet ihres Themes hinzu und stellen fest, dass er nicht funktioniert. In einem Community-Thread berichtet ein Händler, dass das vorgeschlagene CSS nicht funktionierte, und fragt nach anderen Ideen (Shopify Community Thread 383898).

Wenn Sie die Ursachen verstehen, sparen Sie sich mühsame Fehlversuche.

/* Beispielhafter Panel-Übergang (Selektoren variieren je nach Theme) */
.site-nav__dropdown { opacity: 0; transition: opacity var(--speed) ease; }
.site-nav__dropdown.is-open { opacity: 1; }

display und visibility gleiten standardmäßig nicht

Damit ein Element sanft animiert werden kann, muss der Browser Zwischenwerte zwischen Start- und Endzustand berechnen können. Beispielsweise kann opacity stufenlos von 0.0 über 0.5 bis 1.0 überblenden.

Klassische Menüs verstecken Untermenüs jedoch mit display: none; und zeigen sie mit display: block; an. Wie Webentwickler in Fachforen erläutern, lassen sich visibility und display typischerweise nicht weich animieren, da es sich um diskrete Ein/Aus-Zustände handelt (Shopify Dev Community). Wechselt display von none zu block, schaltet der Browser den Container augenblicklich sichtbar und ignoriert jede gleichzeitige Opacity-Transition.

Moderne Webstandards kennen zwar transition-behavior: allow-discrete, um Übergänge bei diskreten Eigenschaften wie display zu erlauben (MDN Web Docs), doch ist das eine neuere Funktion – prüfen Sie die Browserunterstützung, bevor Sie sich darauf verlassen.

Das Theme-JavaScript kontrolliert den Öffnungsstatus

Viele Themes verlassen sich nicht allein auf CSS-Hover: JavaScript kann entscheiden, wann ein Menü öffnet und schließt – deshalb kann eine nur im Stylesheet ergänzte Transition wirkungslos bleiben.

Ein Community-Thread zu einem weichen Slide-in-Megamenü im Dawn-Theme etwa hält fest, dass dafür zusätzliches JavaScript für Klicks neben dem CSS nötig ist, und ein Antwortender empfiehlt, einen Entwickler zu beauftragen (Shopify Community Thread 223448). Steuert das Theme-JavaScript den Öffnungszustand, kann eine reine CSS-Hover-Transition diese Logik möglicherweise nicht überschreiben.

CSS-Selektoren ändern sich zwischen Theme-Versionen

Selbst wenn ein Forum-Snippet in einem älteren Shop funktionierte, ändern sich Themes mit der Zeit. In einem Community-Thread zur Dropdown-Animation im Dawn-Theme berichtet ein Händler, dass die Animation nur einmal abläuft, und ein Hinweis besagt, dass neuere Dawn-Versionen Änderungen in anderen Dateien erfordern (Shopify Community Thread 237349).

Zielt ein Snippet auf Klassennamen oder Dateien einer Theme-Version, bewirkt es in einer neueren Version oder in einem Theme mit anderen Selektoren womöglich nichts.

Abbildung 1: Konzeptillustration — Ein abrupt aufspringendes Menü mit display: none im Vergleich zu sanftem Einblenden über Opacity-Transitions.

Three ways to rebuild the motion: theme code, a developer, or a menu app

Mit den notierten Bewegungswerten aus den DevTools stehen Ihnen drei Wege offen, um die Menü-Animation auf Ihrem Shopify-Store zu realisieren.

Weg 1: Theme-Code direkt bearbeiten

Wenn Sie CSS-Transitions beherrschen und Ihr Theme konsistente Klassen verwendet, können Sie Regeln in Ihrem Stylesheet hinterlegen. Bevor Sie Liquid-Dateien oder Stylesheets ändern, rät Shopify ausdrücklich dazu, Ihr Theme zu duplizieren, um ein Backup zu erstellen (Shopify Help Center). So können Sie fehlerhafte Zustände jederzeit rückgängig machen.

Weg 2: Einen Entwickler beauftragen

Wenn eine Animation koordinierte DOM-Zustandswechsel erfordert – etwa gestaffelte Spalten-Einblendungen oder ein komplexes Drawer-Gleiten –, liefert individuelle Entwicklung präzise Ergebnisse. Im Shopify-Community-Thread zum Dawn-Slide-in-Megamenü empfiehlt ein Antwortender, einen Entwickler zu beauftragen (Shopify Community Thread 223448). Fragen Sie bei jedem Theme-Upgrade nach der Wartung.

Weg 3: Menü-Apps einsetzen

Für Händler ohne Programmierkenntnisse bieten Menü-Apps visuelle Einstellungen für Übergangseffekte. Allerdings variiert der Leistungsumfang erheblich. Der Store-Eintrag der App MegaShelf erwähnt beispielsweise Einstellungen für Animationsstil und Hover-Effekte (Shopify App Store). Da App-Einträge oft nur eine kurze Zusammenfassung ohne technische Details bieten, sollten Sie vorab eine Vorschau prüfen, um sicherzustellen, dass die Effekte Ihren Vorstellungen entsprechen.

Falls Ihr Vorhaben auch die Neustrukturierung umfangreicher Sortimente umfasst, empfehlen wir unseren Leitfaden zu den Best Practices für Mega-Menüs.

Tune the feel: timing, easing, hover and mobile

Das Nachbauen einer Menü-Animation bedeutet nicht das Abschreiben von Codezeilen, sondern das harmonische Abstimmen von Rhythmus, visueller Rückmeldung und Ergonomie.

Timing und Dauer

Die Animationsgeschwindigkeit bestimmt, wie reaktionsschnell Ihr Shop wirkt. Laut Nielsen Norman Group sollte die Dauer der meisten Animationen im Bereich von 100–500 ms liegen, je nach Komplexität und Strecke des Elements, und Animationen sind weit häufiger zu lang als zu kurz (Nielsen Norman Group).

• 100 bis 500 ms: Der allgemein genannte Bereich für die meisten Oberflächenanimationen, abhängig von Komplexität und Strecke des Elements.
• 200 bis 300 ms: Laut NN/g kann das angemessen sein, wenn eine Animation größere Bildschirmänderungen umfasst, etwa ein Modalfenster, das ins Bild fährt.
• Länger: Animationen sind weit häufiger zu lang als zu kurz – suchen Sie die kürzeste Dauer, die nicht ruckartig wirkt.

Stellen Sie die Zeitwerte ein und vergleichen Sie das Ergebnis direkt mit Ihren DevTools-Notizen.

Hover-Effekte am Desktop

Rückmeldungen beim Überfahren von Menüpunkten signalisieren Interaktivität. Ob dezente Unterstreichung von links nach rechts oder sanfte Hintergrundkapsel: Einheitlichkeit über alle Menüeinträge ist entscheidend. Wie Bewegungen die Markenwirkung stärken, zeigt unser Fachbeitrag darüber, wie Menü-Animationen Ihre Marke signalisieren.

Mobilgeräte und reduzierte Bewegung

Desktop-Hover-Effekte existieren auf Smartphones nicht, da Touchscreens keinen Mauszeiger kennen. Mobile Kunden navigieren über Fingertipps. Sorgen Sie dafür, dass das Drawer-Menü ohne Ruckeln öffnet, wie in unserem Ratgeber über das mobile Drawer-Menü beschrieben.

Besonders wichtig ist Barrierefreiheit: Gemäß WCAG 2.3.3 (Stufe AAA) sollten durch Interaktionen ausgelöste Bewegungsanimationen deaktiviert werden können, sofern sie nicht zwingend für die Funktion erforderlich sind (W3C WCAG 2.1 Richtlinien).

Moderne Browser unterstützen CSS-Media-Queries mit @media (prefers-reduced-motion), um festzustellen, ob Nutzer in ihrem Betriebssystem eine Reduzierung von Animationen aktiviert haben (MDN Web Docs). In diesem Fall sollte Ihr Shop ausladende Gleiteffekte durch sofortiges Umschalten oder sehr dezentes, kurzes Überblenden ersetzen.

Abbildung 2: Konzeptillustration — Abstimmung von Animationsdauer und Hover-Effekten bei gleichzeitigem Respektieren reduzierter Bewegungsvorgaben.

Copy the idea, not the code

Wenn Sie ein herausragendes Menü entdecken, was dürfen Sie rechtlich und ethisch übernehmen?

Nach Auskunft des U.S. Copyright Office schützt das Urheberrecht keine Fakten, Ideen, Systeme oder Funktionsweisen; geschützt sind hingegen originäre schöpferische Werke wie Texte, Grafiken und konkreter Quellcode (U.S. Copyright Office FAQ).

• Was Sie übernehmen dürfen: Das konzeptionelle Bewegungsdesign. Die Beobachtung, dass ein Navigationspanel leicht nach unten gleitet und dabei mit einer Ease-out-Kurve einblendet, ist eine Idee. Eine ähnliche Interaktion mit eigenem Code und eigenen Assets nachzubauen, ist der Zweck dieses Leitfadens.
• Was Sie niemals kopieren dürfen: Extrahieren Sie keine kompilierten JavaScript-Dateien fremder Seiten, keine geschützten Stylesheets, Markenlogos, individuellen Icons oder urheberrechtlich geschützten Produktfotos.

Erstellen Sie Ihr Menü mit Ihren eigenen Markenfarben, Hausschriften und lizenzierten Bildinhalten. Hinweis: Dieser Abschnitt beschreibt allgemeine Praxisstandards der Webbranche und stellt keine formelle Rechtsberatung dar.

Trade-offs: when matching another menu’s motion is the wrong move

Bevor Sie eine aufwendige Animation integrieren, prüfen Sie den tatsächlichen Nutzen für Ihre Zielgruppe. Das Kopieren von Animationen bringt handfeste Kompromisse mit sich:

1. Marken-Dissonanz: Eine bedächtige, opulente Animation einer Luxusboutique wirkt in einem Baumarkt- oder Lebensmittelshop deplatziert, in dem Kunden schnelle Produktfilter erwarten.
2. Wahrgenommene Geschwindigkeitsverluste: Lange Öffnungsanimationen können die Navigation träge wirken lassen, und NN/g hält fest, dass Animationen weit häufiger zu lang als zu kurz sind. Mehr zur Menügeschwindigkeit lesen Sie in unserem Artikel zur Performance mobiler Menüs.
3. Wartungsaufwand des Themes: Direkte Eingriffe in den Theme-Code für Animationen erzeugen technische Schulden. Nach Theme-Updates müssen Ihre Anpassungen womöglich geprüft und neu angewendet werden (Shopify Help Center).
4. Grenzen von App-Einstellungen: Während Menü-Apps Code-Eingriffe überflüssig machen, arbeiten sie innerhalb vordefinierter Vorlagen. Hochkomplexe Keyframe-Choreografien erfordern dennoch individuelles CSS.
5. Barrierefreiheit: Starke oder unerwartete Oberflächenbewegung kann bei Besuchern mit vestibulären Störungen Beschwerden auslösen – die Beachtung von Reduced-Motion-Einstellungen ist daher wichtig (MDN Web Docs).

Where Navi+ fits

Wenn Ihr aktuelles Shopify-Theme keine flüssigen Animationseinstellungen mitbringt und Sie Theme-Dateien nicht modifizieren möchten, bietet Navi+ Tab Bar & Mega Menu eine saubere visuelle Lösung.

Navi+ bietet diese Bewegungseinstellungen im Menü-Editor an, sodass Sie dafür keine Liquid-Dateien bearbeiten müssen:

• Wählbare Öffnungsstile für Untermenüs: Wählen Sie flexibel zwischen slide (gleiten), fade (überblenden), expand (aufklappen) oder none (sofort) und bestimmen Sie die Geschwindigkeit über einen Regler – ohne CSS-Transitions oder Theme-JavaScript zu editieren.
• Flexible Auslöser: Untermenüs lassen sich am Desktop wahlweise per Hover oder per Klick öffnen, inklusive einstellbarer Hover-Sensitivität, um versehentliches Aufklappen bei raschen Mausbewegungen zu verhindern.
• Vielseitige Ebene-1-Hover-Stile: Wählen Sie aus animierten Unterstreichungen (von links nach rechts, weiches Einblenden oder von der Mitte ausbreitend) oder sanften Hintergrundhervorhebungen mit leichter Textbewegung.
• Isoliertes Custom-CSS: Für spezifische Easing-Werte können Sie CSS-Regeln hinterlegen, die ausschließlich für dieses eine Menü gelten, ohne globale Stylesheets zu belasten.
• Getrennte Mobil-Steuerung: Verwalten Sie Desktop-Megamenüs und mobilen Drawer oder untere Tab Bar separat.

Da Sie diese Optionen in der App statt in Ihren Theme-Dateien festlegen, gibt es in Ihrem Theme keinen eigenen Transition-Code, den Sie nach einem Theme-Update neu anwenden müssten. Streben Sie ein ähnliches Gefühl an, keine identische Kopie: Manche Effekte erfordern weiterhin Custom CSS oder einen Entwickler.

Wenn Ihr Theme nicht die gewünschte Bewegung bietet und Sie keine Theme-Dateien bearbeiten möchten, können Sie mit Navi+ Tab Bar & Mega Menu festlegen, wie Untermenüs öffnen, wie schnell sie reagieren und wie Einträge bei Hover animieren — und das Ganze mit isoliertem CSS für dieses eine Menü verfeinern. Testen Sie es an einem Duplikat Ihrer Idee, vergleichen Sie es mit Ihren DevTools-Notizen und behalten Sie, was sich richtig anfühlt.

Action checklist

Nutzen Sie diese Schritt-für-Schritt-Checkliste zur Planung und Kontrolle Ihrer Menü-Animation:

• Menütyp definieren: Klären Sie, ob Sie ein Mega-Menü, Dropdown, Drawer-Menü oder eine Tab Bar aufbauen.
• Bewegung und Trigger benennen: Legen Sie fest, ob das Menü gleitet, einblendet oder aufklappt und ob Hover oder Klick auslöst.
• DevTools-Werte notieren: Erfassen Sie Dauer, Easing-Kurve und animierte Eigenschaften Ihrer Referenzseite.
• Theme duplizieren: Erstellen Sie vor Code-Anpassungen im Shopify-Admin immer ein Backup Ihres Themes.
• Realisierungsweg wählen: Entscheiden Sie sich zwischen Theme-Code, Entwicklerbeauftragung oder Menü-App.
• Mobil und barrierefrei testen: Prüfen Sie Touch-Gesten am Smartphone und testen Sie mit aktiver Funktion für reduzierte Bewegung.
• Eigene Marken-Assets einsetzen: Stellen Sie sicher, dass Farben, Schriften, Icons und Bilder aus Ihrem eigenen Fundus stammen.

FAQ

Warum funktioniert meine CSS-Transition im Shopify-Menü nicht?

Eingefügte CSS-Transitions scheitern oft, weil viele Menüs mit display oder visibility ein- und ausgeblendet werden, was sich in der Regel nicht überblenden lässt. Standard-Transitions können diese diskreten An/Aus-Eigenschaften ohne transition-behavior: allow-discrete nicht weich animieren – eine neuere CSS-Funktion, prüfen Sie daher die Browserunterstützung. Außerdem steuern viele Themes Öffnen und Schließen per JavaScript, was reine CSS-Hover-Regeln überschreiben kann.

Wie messe ich die Animationsgeschwindigkeit einer fremden Website?

Öffnen Sie die Chrome Developer Tools per Rechtsklick auf die Seite und Auswahl von Inspect. Drücken Sie Escape, öffnen Sie unter More tools das Animations-Panel, verlangsamen Sie die Wiedergabe mit der Geschwindigkeitssteuerung und lösen Sie das Menü aus. Im Animations-Panel können Sie die Animationsgruppe verlangsamen, erneut abspielen und untersuchen, einschließlich Timing, Verzögerung und Dauer.

Ist es legal, das Menü einer anderen Website zu kopieren?

Das U.S. Copyright Office erklärt, dass das Urheberrecht keine Fakten, Ideen, Systeme oder Funktionsweisen schützt, wohl aber Originalwerke wie Code, Texte und Grafiken. Lassen Sie sich also von der Bewegungsidee einer anderen Website inspirieren und bauen Sie ein ähnliches Gefühl selbst nach, und kopieren Sie niemals proprietären Code, Skripte, Grafiken, Markenicons oder Fotografien. Dies ist keine Rechtsberatung.

Wie lang sollte eine Menü-Animation dauern?

Laut Nielsen Norman Group sollte die Dauer der meisten Animationen im Bereich von 100–500 ms liegen, und 200–300 ms können angemessen sein, wenn eine Animation größere Bildschirmänderungen umfasst. Animationen sind weit häufiger zu lang als zu kurz – wählen Sie daher die kürzeste Dauer, die nicht ruckartig wirkt.

Kann ich sanfte Menü-Animationen ohne Entwickler einrichten?

Ja, in manchen Fällen. Bietet Ihr aktives Shopify-Theme eingebaute Transition-Einstellungen, können Sie diese im Theme-Editor anpassen. Alternativ installieren Sie eine spezielle Shopify-Navigations-App wie Navi+ Tab Bar & Mega Menu, mit der Sie Öffnungsstile, Geschwindigkeit und Hover-Effekte ohne Bearbeitung des Theme-Codes konfigurieren. Bearbeiten Sie den Theme-Code selbst, duplizieren Sie das Theme zuerst.

Sources

• Chrome DevTools Dokumentation: Inspect CSS animations — Offizielle Anleitung zur Untersuchung, Wiederholung und Anpassung von CSS-Animationsgruppen.
• MDN Web Docs: Using CSS transitions — Spezifikationen zu CSS-Transition-Eigenschaften, Dauer, Timing-Funktion und Verzögerung.
• MDN Web Docs: transition-behavior — Dokumentation zur Aktivierung von Transitions bei diskreten Eigenschaften wie display.
• MDN Web Docs: @media (prefers-reduced-motion) — Standard zur Erkennung von Systemeinstellungen für reduzierte Bewegung.
• Nielsen Norman Group: Animation Duration and Timing — Forschung von Page Laubheimer über optimale Animationszeiten (100–500 ms).
• Shopify Help Center: Drop-down menus — Dokumentation zu Menüverschachtelungen und theme-abhängigen Menüplatzierungen.
• Shopify Help Center: Editing theme code — Leitfaden zum Duplizieren von Themes als Sicherheitskopie vor Code-Änderungen.
• U.S. Copyright Office: FAQ on Copyright Protection — Erklärung, dass das Urheberrecht keine Ideen, Methoden oder Systeme schützt.
• W3C Web Accessibility Initiative: WCAG 2.1 Understanding Success Criterion 2.3.3 — Barrierefreiheitsstandards zur Deaktivierung nicht-essenzieller Interaktions-Animationen.
• Shopify Community: How do you give a mega menu dropdown animation? — Händlerdiskussion über unwirksame CSS-Vorschläge bei Dropdown-Animationen.
• Shopify Community: How to enable smooth mega menu slide in effect on Dawn theme? — Technische Diskussion zu JavaScript-Erfordernissen für Schiebeeffekte im Dawn-Theme.
• Shopify Dev Community: Fade in/Fade out of header menu — Fachdiskussion über Transitionsgrenzen bei visibility- und display-Eigenschaften.
• Shopify Community: Menu dropdown animation - Dawn 7.0.1 Theme — Analyse von Selektor-Verschiebungen in Dawn und Problemen mit einmaliger Ausführung.
• Shopify App Store: MegaShelf, Visual Mega Menu — App-Store-Eintrag, der Einstellungen für Animationsstil und Hover-Effekte erwähnt.