{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "menue-icon-und-label-morph",
 "name": "Menü-Button-Morph: Burger zu X und Label-Tausch „Menu/Close“",
 "name_en": "Menu toggle morph (hamburger to close, text label swap)",
 "kurz": "Der Menü-Button zeigt seinen Zustand selbst: Linien drehen zum X, das Label rollt von „Menü“ zu „Schließen“.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "präzise",
  "editorial",
  "verspielt"
 ],
 "technik": [
  "css",
  "svg",
  "gsap"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Der Menü-Button trägt ein Textlabel („Menü“) neben zwei oder drei Linien. Beim Öffnen drehen die äußeren Linien zum X (+45° und −45°), eine mittlere Linie zieht sich zusammen. Gleichzeitig rollt das Label in einer einzeiligen Maske nach oben: „Menü“ fährt hinaus, „Schließen“ kommt von unten nach. Bei Hover rücken die Linien leicht auseinander. Optional steht neben „Schließen“ ein Kürzel-Hinweis [Esc].",
  "warum_es_wirkt": "Der Zustand wechselt genau dort, wo geklickt wurde. Das Wort sagt eindeutiger als jedes Icon, was der nächste Klick tut, und wirkt dabei editorial.",
  "wann_einsetzen": "Bei jeder Overlay- oder Drawer-Navigation, besonders wenn die Seite sonst wenig Bedienelemente zeigt.",
  "wann_nicht": "Wenn die Navigation dauerhaft sichtbar ist. Dann braucht es keinen Burger.",
  "varianten": [
   "Zwei Linien zum X",
   "Drei Linien: Mittellinie verschwindet, dazu Kürzel-Hinweis „Schließen [Esc]“ (basement.studio)",
   "Kreis-Button, der beim Öffnen wächst und zur Menüfläche wird",
   "Label-Roll allein, ohne Linien",
   "Lottie-Animation statt CSS"
  ],
  "umsetzung": "<button aria-expanded=\"false\" aria-controls=\"menue\"><span class=\"wort\"><span class=\"rolle\"><span>Menü</span><span aria-hidden=\"true\">Schließen</span></span></span><span class=\"striche\" aria-hidden=\"true\"><i></i><i></i></span></button>. .wort ist eine Zeile hoch (height: 1.25em; overflow: hidden), .rolle stapelt beide Wörter als Grid und verschiebt sich geöffnet um translateY(−1.25em). Beide Wörter teilen eine Spalte, so bleibt die Breite stabil. Linien absolut zentriert, geschlossen um ±Abstand versetzt, geöffnet translate 0 und rotate(±45deg). Die Kurve cubic-bezier(.65,.05,0,1) gilt für Linien (400 ms) und Label (450 ms). Den Zustand nur über aria-expanded steuern. Das zweite Wort ist aria-hidden, damit der Name nicht doppelt gelesen wird; der Name bleibt „Menü“, aria-expanded meldet den Zustand.",
  "mobil": "Trefferfläche mindestens 44 × 44 px. Das Label darf mobil entfallen, das Icon bleibt. Hover-Effekte nur unter @media (hover: hover).",
  "reduzierte_bewegung": "Kein Roll, das Label wechselt sofort. Das X erscheint ohne Drehung. Die Menüfläche blendet nur kurz ein.",
  "barrierefreiheit": "Echter <button> mit aria-expanded und aria-controls. Sichtbarer Fokusring. Escape schließt und setzt den Fokus zurück auf den Button. Die geschlossene Menüfläche ist inert."
 },
 "messwerte": {
  "easing": "cubic-bezier(.65,.05,0,1) (Osmo-Überschriften/Icons)",
  "dauer_ms": "Icons 400; Label-Roll 400–550",
  "stagger_ms": "Linien 0–50",
  "distanz": "Label-Roll 100 % der Zeilenhöhe; Linien-Rotation ±45°",
  "sonstiges": "Easing und Dauern aus Osmo Side Navigation (CSS-Teil) beobachtet; Distanzen typisch.",
  "herkunft": "beobachtet",
  "quelle": "https://osmo.supply/resource/side-navigation-with-wipe-effect"
 },
 "kurve": {
  "bezier": [
   0.65,
   0.05,
   0.0,
   1.0
  ],
  "css": "cubic-bezier(0.65, 0.05, 0, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "basement.studio",
   "url": "https://basement.studio",
   "auszeichnung": "",
   "beobachtung": "Schließen-Control „Close [ESC]“ mit Tastaturhinweis.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Your Majesty",
   "url": "https://yourmajesty.co/",
   "auszeichnung": "",
   "beobachtung": "„Menu“-Button mit „Close“-Label, daneben Contact-Button.",
   "art": "website"
  },
  {
   "seite": "Exo Ape",
   "url": "https://www.exoape.com",
   "auszeichnung": "",
   "beobachtung": "„Menu“-Button und „Close“-Control.",
   "art": "website"
  },
  {
   "seite": "Osmo: Burger Menu Button",
   "url": "https://www.osmo.supply/resource/burger-menu-button",
   "auszeichnung": "Osmo-Ressource",
   "beobachtung": "Nur Titel gesehen.",
   "art": "demo"
  },
  {
   "seite": "Awwwards Inspiration: Hamburger menu animation",
   "url": "https://www.awwwards.com/inspiration/hamburger-menu-animation",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  }
 ],
 "tutorials": [
  {
   "titel": "Foxland: Simple accessible SVG menu hamburger animation",
   "url": "https://foxland.fi/simple-accessible-svg-menu-hamburger-animation"
  },
  {
   "titel": "DigitalOcean: Building a morphing hamburger menu with CSS",
   "url": "https://www.digitalocean.com/community/tutorials/building-a-morphing-hamburger-menu-with-css"
  }
 ],
 "kombinierbar_mit": [
  "vollbild-overlay-menue-bildvorschau",
  "menue-choreografie-wipe-clip",
  "kompakte-expandierende-navigation"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/menue-icon-und-label-morph/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Menü-Button zeigt seinen Zustand selbst: Linien drehen zum X, das Label rollt von „Menü“ zu „Schließen“.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.65, 0.05, 0, 1)",
   "dauer_ms": {
    "linien": 400,
    "label_roll": 450,
    "flaeche_auf": 500,
    "flaeche_zu": 280,
    "eintraege": 400,
    "hover_druck": 150
   },
   "easing_schliessen_flaeche": "cubic-bezier(0.4, 0, 1, 1)",
   "easing_ui": "cubic-bezier(0.4, 0, 0.2, 1)",
   "stagger_ms": {
    "untere_linie": 50,
    "eintraege": 40,
    "eintraege_start": 140
   },
   "distanz": {
    "label_roll": "100 % der Zeilenhöhe (1.25em)",
    "linien_rotation": "±45°",
    "eintraege": "8px"
   },
   "linien": {
    "laenge": "1.75em (Kreis: 1.2em)",
    "staerke_px": 2,
    "halber_abstand_px": {
     "zwei": 4,
     "drei": 7,
     "kreis": 3.5
    },
    "hover_halber_abstand_px": {
     "zwei": 5.5,
     "drei": 8.5,
     "kreis": 5
    },
    "mittellinie_drei": "scaleX 1 → 0, Deckkraft 1 → 0"
   },
   "kreis": {
    "durchmesser_px": 52,
    "clip_path": "circle(26px at Knopfmitte) → circle(fernste Ecke at Knopfmitte)"
   },
   "flaeche": {
    "breite": "min(560px, 100vw)",
    "auf": "clip-path inset(0 0 0 100%) → inset(0)",
    "schleier": "rgba(26,26,26,.38)"
   },
   "druck": "scale 0.96",
   "trefferflaeche_px": 44,
   "label_schrift": "Special Gothic 600, wdth 75 %, versal, Laufweite 0.06em, 15px (Vorschau 22px)"
  },
  "ausloeser": "klick",
  "touch": "Tippen öffnet und schließt, kein Hover-Spreizen. Trefferfläche mind. 44 × 44 px. Unter 560 px wandert die Telefonnummer aus dem Kopf in eine untere Leiste (Anrufen, Anfrage), die Menüfläche füllt den Bildschirm.",
  "reduziert": "Kein Roll, keine Drehung: Label und X wechseln sofort. Die Menüfläche blendet in 150 ms linear ein, die Einträge stehen ohne Versatz.",
  "korrekturen": {
   "beschreibung": "Der Menü-Button trägt ein Textlabel („Menü“) neben zwei oder drei Linien. Beim Öffnen drehen die äußeren Linien zum X (+45° und −45°), eine mittlere Linie zieht sich zusammen. Gleichzeitig rollt das Label in einer einzeiligen Maske nach oben: „Menü“ fährt hinaus, „Schließen“ kommt von unten nach. Bei Hover rücken die Linien leicht auseinander. Optional steht neben „Schließen“ ein Kürzel-Hinweis [Esc].",
   "warum_es_wirkt": "Der Zustand wechselt genau dort, wo geklickt wurde. Das Wort sagt eindeutiger als jedes Icon, was der nächste Klick tut, und wirkt dabei editorial.",
   "wann_einsetzen": "Bei jeder Overlay- oder Drawer-Navigation, besonders wenn die Seite sonst wenig Bedienelemente zeigt.",
   "wann_nicht": "Wenn die Navigation dauerhaft sichtbar ist. Dann braucht es keinen Burger.",
   "varianten": [
    "Zwei Linien zum X",
    "Drei Linien: Mittellinie verschwindet, dazu Kürzel-Hinweis „Schließen [Esc]“ (basement.studio)",
    "Kreis-Button, der beim Öffnen wächst und zur Menüfläche wird",
    "Label-Roll allein, ohne Linien",
    "Lottie-Animation statt CSS"
   ],
   "umsetzung": "<button aria-expanded=\"false\" aria-controls=\"menue\"><span class=\"wort\"><span class=\"rolle\"><span>Menü</span><span aria-hidden=\"true\">Schließen</span></span></span><span class=\"striche\" aria-hidden=\"true\"><i></i><i></i></span></button>. .wort ist eine Zeile hoch (height: 1.25em; overflow: hidden), .rolle stapelt beide Wörter als Grid und verschiebt sich geöffnet um translateY(−1.25em). Beide Wörter teilen eine Spalte, so bleibt die Breite stabil. Linien absolut zentriert, geschlossen um ±Abstand versetzt, geöffnet translate 0 und rotate(±45deg). Die Kurve cubic-bezier(.65,.05,0,1) gilt für Linien (400 ms) und Label (450 ms). Den Zustand nur über aria-expanded steuern. Das zweite Wort ist aria-hidden, damit der Name nicht doppelt gelesen wird; der Name bleibt „Menü“, aria-expanded meldet den Zustand.",
   "mobil": "Trefferfläche mindestens 44 × 44 px. Das Label darf mobil entfallen, das Icon bleibt. Hover-Effekte nur unter @media (hover: hover).",
   "reduzierte_bewegung": "Kein Roll, das Label wechselt sofort. Das X erscheint ohne Drehung. Die Menüfläche blendet nur kurz ein.",
   "barrierefreiheit": "Echter <button> mit aria-expanded und aria-controls. Sichtbarer Fokusring. Escape schließt und setzt den Fokus zurück auf den Button. Die geschlossene Menüfläche ist inert."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Tischlerei Tönjes aus Oldenburg-Donnerschwee (Rezept handwerk-werkstatt-klartext: Special Gothic, Atkinson Hyperlegible Next, Materialfarben, Signal-Orange nur für Anrufen/Anfrage). Hero mit eigener SVG-Werkzeichnung eines Einbauschranks unter der Dachschräge. Der Button öffnet eine Drawer-Navigation mit Kurzbeschreibung je Seite. Umschalter für drei Varianten: zwei Linien, drei Linien mit Esc-Hinweis, Kreis, der per clip-path circle() zur dunklen Menüfläche wächst. Label-Breite richtet sich nach dem längeren Wort („Schließen“), Text rechtsbündig, damit die Linien stillstehen. Fläche schließt schneller (280 ms, Accelerate) als sie öffnet. Vorführung: gezeichneter Zeiger, Hover, Druck, Öffnen, Schließen; in der Vorschau nacheinander alle drei Varianten. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: --leise Alpha .62 → .72 (5,4:1 auch auf Salbei #d3cdc2); geschlossenes Menü (inert) ohne Scrollbereich, overflow-y: auto erst unter .offen; Kontrastmodus-Rahmen für Knöpfe."
 }
}