{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "mega-menue-morphing-viewport", "name": "Mega-Menü mit morphendem gemeinsamem Viewport", "name_en": "Morphing mega menu (shared dropdown viewport, Stripe-style)", "kurz": "Vier Menüs teilen sich eine Box: Sie morpht in 250 ms auf Breite und Höhe des neuen Inhalts, der Inhalt gleitet in Bewegungsrichtung.", "kategorie": "Navigation", "kategorie_slug": "navigation", "kategorie_nr": 3, "bau_chat": "C3", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "ruhig", "präzise" ], "stimmung_roh": [ "technisch", "präzise", "ruhig", "seriös" ], "technik": [ "css", "vanilla-js", "radix", "popover", "anchor-positioning" ], "technik_gruppen": [ "css", "js", "andere" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Mehrere Hauptpunkte wie Produkt oder Ressourcen teilen sich einen einzigen Dropdown-Container, den Viewport. Beim Hover öffnet er nach kurzer Verzögerung. Wechselt man zum Nachbarn, schließt er nicht, sondern ändert Breite, Höhe und Lage fließend auf die Maße des neuen Inhalts. Der alte Inhalt gleitet in Bewegungsrichtung hinaus, der neue kommt von der Gegenseite und blendet ein. Ein kleiner Pfeil kann auf den aktiven Trigger zeigen. Die Inhalte sind typografisch ruhig: Gruppen mit kleinen Überschriften, Icons, Kurzbeschreibungen und oft ein Teaser mit Bild.", "warum_es_wirkt": "Der Viewport wirkt wie ein Objekt, das mitdenkt. Es gibt kein Flackern zwischen den Menüs. Das richtungsbewusste Gleiten zeigt die räumliche Ordnung der Menüpunkte.", "wann_einsetzen": "Produkt- und SaaS-Seiten, Agenturen mit mehreren Leistungsbereichen, Shops mit Kategorien. Lohnt sich ab etwa drei Triggern mit je fünf oder mehr Einträgen.", "wann_nicht": "Bei wenigen, flachen Links und bei Portfolios. Bei einer reinen Touch-Zielgruppe ohne Desktop-Anteil.", "varianten": [ "Stripe-Stil: Die Box folgt dem Trigger und morpht, die Inhalte gleiten richtungsabhängig", "Radix- bzw. Vercel-Stil: Der Viewport bleibt stehen, die Größe kommt über CSS-Variablen, die Richtung über data-motion (from-start, from-end, to-start, to-end), ein Pfeil wandert", "Vollbreites Mega-Menü mit Kategorienspalte links, die den Inhaltsbereich steuert (Meter)", "Produktkarten mit Mini-UI-Vorschau (SurferSEO)", "Directional Hover (Osmo Mega Navigation)", "Mobil: Drill-down-Panels statt Viewport" ], "umsetzung": "Alle Inhalte vorrendern und absolut im Viewport stapeln (width: max-content). Den aktiven Inhalt messen (offsetWidth, offsetHeight) und als CSS-Variablen --w, --h und --x auf den Viewport schreiben. width, height und translate transitionieren, overflow: hidden schneidet den Inhalt während des Morphens zu. Beim ersten Öffnen die Transition kurz abschalten, damit die Box nicht aus der alten Größe wächst.\n\nRichtung aus dem Index-Vergleich von alt und neu bestimmen und als data-motion setzen. Keyframes von-start, von-ende, zu-start und zu-ende mit translateX und opacity. Vor dem Setzen das Attribut entfernen und einmal Layout lesen, sonst startet die Animation bei schnellem Hin und Her nicht neu.\n\nHover-Intent: Öffnen nach 200 ms. Solange die Box offen ist oder bis 300 ms nach dem Schließen wechseln die Trigger ohne Verzögerung (Radix skipDelayDuration). Beim Verlassen eine kurze Gnadenfrist lassen, damit der Weg vom Trigger in die Box und diagonales Ziehen nicht schließen.\n\nInaktive Panels mit inert versehen. Pfeiltasten in onKeyDown behandeln, onKeyPress feuert dafür nicht. backdrop-filter auf der Box wirkt nicht, wenn ein Elternelement für das Öffnen opacity oder transform animiert; dann den Hintergrund fast deckend wählen oder den Blur auf ein Geschwisterelement legen.", "mobil": "Der Viewport entfällt. Ein Menü-Knopf öffnet ein Vollbild-Blatt mit Drill-down-Panels oder einem Akkordeon. Die Trigger sind Buttons, Antippen öffnet die Unterebene.", "reduzierte_bewegung": "Kein Gleiten, nur Überblenden in 100 bis 150 ms. Größe und Lage wechseln sofort.", "barrierefreiheit": "Trigger als