Gabriele: Fragen zum Hamburger Button

Moin,

  1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
    Warum klappt dies nicht?

  2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

  1. @@Gabriele

    1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
      Warum klappt dies nicht?

    Wegen display: none.

    1. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

    Mit anchor positioning.

    🖖 Live long and prosper

    --
    “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
    — Bruce Springsteen, Manchester 2025-05-14
    1. Mit anchor positioning.

      Das dortige Beispiel zeigt aber das Aussehen von Tooltipps, in der Art einer Sprechblase:

      Ist diese Methode wirklich zum Aufklappen von Untermenus geeignet?

      1. Hallo,

        Mit anchor positioning.

        Das dortige Beispiel zeigt aber das Aussehen von Tooltipps, in der Art einer Sprechblase:

        Ist diese Methode wirklich zum Aufklappen von Untermenus geeignet?

        da wird auf Knopfdruck etwas aufgeklappt …

        Gruß
        Jürgen

        1. Hallo,

          da wird auf Knopfdruck etwas aufgeklappt …

          Was aufgeklappt wurde, habe ich ja in meinem Beitrag gezeigt. Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

          1. Hallo,

            Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

            nein, aber bei popover auch nur auf Wunsch. Hast du dir den Quelltext oder meine anderen Links und deren Quelltext mal angesehen?

            Gruß
            Jürgen

            1. Hallo,

              Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

              nein, aber bei popover auch nur auf Wunsch. Hast du dir den Quelltext oder meine anderen Links und deren Quelltext mal angesehen?

              Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

              1. Hallo,

                Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

                in diesem Tutorial werden popover und anchor behandelt. Die Tooltips sind da nur ein Beispiel. Letztendlich geht es darum, bei Knopfdruck ein Fenster (popover) unter einem Knopf (anchor) zu öffnen.

                Was hast du an diesem Tutorial denn nicht verstanden?

                Gruß
                Jürgen

                1. Hallo,

                  Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

                  in diesem Tutorial werden popover und anchor behandelt. Die Tooltips sind da nur ein Beispiel. Letztendlich geht es darum, bei Knopfdruck ein Fenster (popover) unter einem Knopf (anchor) zu öffnen.

                  Was hast du an diesem Tutorial denn nicht verstanden?

                  Z.B. Was .hinweis und kbd bewirken. Wenn ich sie lösche, ändert sich am Ergebnis nichts.

                  1. Z.B. Was .hinweis und kbd bewirken. Wenn ich sie lösche, ändert sich am Ergebnis nichts.

                    an welchem Kapitel?

                    Gruß
                    Jürgen

              2. Hallo,

                Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

                Hast du dir den Quelltext oder meine anderen Links und deren Quelltext mal angesehen?

                Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

                Und jetzt habe ich noch dies gefunden!

                Meine Verwirrung ist komplett😞!

                Bekannt sind mir daher die

                • Varianten mit HTML, CSS und Javascript
                • Varianten mit HTML, CSS
                • Varianten mit HTML

                Muss man erst 6 Semester Informatik o.ä. studieren oder wochenlang Selfhtml lesen, um die beste Variante für seinen Bedarf herauszufinden😕?

                1. Hallo,

                  Und jetzt habe ich noch dies gefunden!

                  Meine Verwirrung ist komplett😞!

                  du hast dich jetzt in meinem persönlichen Bereich im Wiki verirrt. Hier findest du u.A. die Beispielseiten, die ich gebastelt habe, um die popover- und die anchor-Technik zu verstehen.

                  Bekannt sind mir daher die

                  • Varianten mit HTML, CSS und Javascript
                  • Varianten mit HTML, CSS
                  • Varianten mit HTML

                  ich vermute, du meinst Varianten für eine Navigation mit Klappmenü. Ja, da gibt es diverse Varianten. Die mit popover und anchor ist neu, bzw. bei uns in der Entwicklung. Aber popover und anchor sind unabhängige Techniken. Du kannst auch ein Menü mit Javascript öffnen und mit anchor positionieren. Welches die beste Variante ist, hängt vom Anwendungsfall ab. Aber wolltest du nicht am Ende eines Textes nur ein paar weiterführende Links einblenden? Oder verwechsele ich da etwas?

                  Muss man erst 6 Semester Informatik o.ä. studieren oder wochenlang Selfhtml lesen, um die beste Variante für seinen Bedarf herauszufinden😕?

                  Wenn du dich mit einem Site-Menü beschäftigst, ist das eher etwas für Fortgeschrittene, etwas in der Nähe eines Buttons einblenden ist da schon einfacher. Da passt unser Tooltip-Tutorial schon. Du solltest aber schon so viel von den Grundlagen verstanden haben, dass du das Aussehen der Tooltips an deine Wünsche anpassen kannst.

                  Aber ich frage jetzt mal nach: Warum machst du das?

                  Willst du nur einmal eine eigene Seite erstellen und dann brauchst du html/css/javascript nicht mehr?

                  Bist du eine Praktikantin, die gerade im Bereich Webdesign steckt und in ein paar Wochen was anderes macht.

                  Soll Webdesign dein Beruf werden?

                  Oder aus ganz anderen Gründen?

                  Gruß
                  Jürgen

                  1. Hallo,

                    Aber ich frage jetzt mal nach: Warum machst du das?

                    Willst du nur einmal eine eigene Seite erstellen und dann brauchst du html/css/javascript nicht mehr?

                    Ich möchte mehrere private Seiten erstellen, aber diese mit modernster Technik, die von den "großen" Browsern verstanden wird.

                    Bist du eine Praktikantin, die gerade im Bereich Webdesign steckt und in ein paar Wochen was anderes macht.

                    Nein, ich bin Rentnerin und daher nicht mehr so aufnahmefähig wie ihr Selfhtml-er.

                    Gruß
                    Gabriele

                    1. n'Abend Gabriele.

                      Nein, ich bin Rentnerin und daher nicht mehr so aufnahmefähig wie ihr Selfhtml-er.

                      dann willkommen im Club. Die meisten SELFHTML-Vereinsmitglieder sind 50+, und auch unsere "Laufkundschaft" ist eher im reiferen Alter.

                      Also so gesehen bist du hier genau richtig. 😁

                      Einen schönen Tag noch
                       Martin

                      --
                      Manchmal kann man gar nicht so viel fühlen, wie man denkt.
                      Und manchmal fühlt man so viel, dass man gar nicht denken kann.
                    2. Hallo

                      Hallo,

                      Aber ich frage jetzt mal nach: Warum machst du das?

                      Willst du nur einmal eine eigene Seite erstellen und dann brauchst du html/css/javascript nicht mehr?

                      Ich möchte mehrere private Seiten erstellen, aber diese mit modernster Technik, die von den "großen" Browsern verstanden wird.

                      Bist du eine Praktikantin, die gerade im Bereich Webdesign steckt und in ein paar Wochen was anderes macht.

                      Nein, ich bin Rentnerin und daher nicht mehr so aufnahmefähig wie ihr Selfhtml-er.

                      ok, dann hast du ja Zeit (auch wenn bei uns (!) Rentnern die Restlaufzeit begrenzt ist 😀), dir die Grundlagen in aller Ruhe anzueignen und dich durch die Anfängerkapitel und Beispiele durch zu arbeiten. Mit „hier und da mal was rauskopieren“ kommst du nicht weit.

                      Zum Alter: mit popover und anchor habe ich Anfang diesen Jahres das erste Mal Kontakt gehabt. Auch Rentner sind vom „lebenslangen Lernen“ nicht befreit.

                      Gruß
                      Jürgen

  2. Hallo Gabriele,

    1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
      Warum klappt dies nicht?

    dein Versuch, im Button die drei Linien zu animieren scheitert daran, dass da nichts zum animieren ist. Warum eigentlich drei span als Linien? Es gibt für den Hamburger ein Unicode-Zeichen.

    Die andere Animation beißt sich mit dem Umschalten display: none / block

    1. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

    Dafür bietet sich die Anchor-Technik an. Hier (https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor) ist die Testversion einer Navigation mit Popover- und Anchor-Technik. Die Positionierung funktioniert z.Zt. nicht im Firefox, aber da werden die (Unter-)Menüs eben nicht unter den Button angezeigt.

    Es gibt auch einen Polyfill für die Anchor-Technik, aber da ist die Verbindung zwischen Anchor und Element etwas aufwändiger, siehe https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Test_der_anchor-Technik

    Gruß
    Jürgen

  3. @@Gabriele

    1. In dem Beispiel
    <button id="hamburger-toggle" class="hamburger-button" aria-label="Menü öffnen/schließen">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </button>
    

    Wo haste denn den Unsinn her? HTML-Elemente zum Zeichen von Figuren?[1]

    Das geht mit SVG, kuckst du. Oder mit Unicode-Zeichen.

    Anstatt aria-label bietet sich für die zugängliche Beschriftung ein visuell verstecktes Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird.

    Mit dem aria-expanded-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Beschriftung ausreichen sollte – ohne „öffnen/schließen“.

    🖖 Live long and prosper

    --
    “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
    — Bruce Springsteen, Manchester 2025-05-14

    1. In der CSSBattle macht man das. Aber das ist hier nicht das Thema. ↩︎

    1. Hallo Gunnar,

      Anstatt aria-label bietet sich für die zugängliche Beschriftung ein visuell verstecktes Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird.

      Mit dem aria-expanded-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Beschriftung ausreichen sollte – ohne „öffnen/schließen“.

      und mit popover kann man auf das Aria-Zeug verzichten, da ist das doch schon drin, oder?

      Gruß
      Jürgen

  4. Moin,

    1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
      Warum klappt dies nicht?

    Erledigt

    1. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

    Erledigt, aber: Wie kann man das aufgeklappte Menu mittig unter dem Button positionieren?

    Gruß Gabriele

    1. Hallo Gabriele

      1. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

      Folgendes einfache Beispiel hat mir KI ausgespuckt, und es funktioniert!

      <div style="text-align:center;">
        <button id="open-popup-button">Öffnen</button>
      </div>
        
      <div id="my-popup" style="display: none; position: absolute;">
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetuer</li>
        <li>adipiscing elit</li>
        <li>sed diam nonummy nibh euismod</li>
      </ul>  
      </div>
      
      <script>
      function positionPopup() {
          const button = document.getElementById('open-popup-button');
          const popup = document.getElementById('my-popup');
          
          // Die Position und Größe des Buttons im Viewport ermitteln
          const rect = button.getBoundingClientRect();
      
          // Die Mitte des Buttons berechnen
          const buttonCenter = rect.left + rect.width / 2;
      
          // Das Pop-up positionieren:
          // top: Unter dem Button + etwas Abstand (z.B. 10px)
          popup.style.top = `${rect.bottom + 10}px`;
          
          // left: Der Mittelpunkt des Buttons
          popup.style.left = `${buttonCenter}px`;
      
          // Zentrieren des Pop-ups anhand seiner eigenen Breite mit CSS Transform
          popup.style.transform = 'translateX(-50%)'; 
      }
      
      // Beim Öffnen des Pop-ups die Funktion aufrufen
      document.getElementById('open-popup-button').addEventListener('click', () => {
          document.getElementById('my-popup').style.display = 'block';
          positionPopup(); 
      });
      </script>
      
      1. @@Winfried, @@Selfhtml-Gemeinde

        Hallo Winfried,
        danke für den Tipp.

        Ich habe inzwischen in KI einige Anfragen zu Flex- und Gridstrukturen gestellt.

        Meine bisherigen Anfragen wurden zu 100% richtig beantwortet, einschließlich komplettem CSS/HTML-Code.

        Ich fürchte, dass SELFHTML schon in Kürze obsolet wird oder nur noch als Input für KI-Systeme dient.

        Da ich meine Anwendung schnell realisieren möchte, ohne stundenlang den oft ausschweifenden Text in Selfhtml lesen zu müssen, werde ich mich jetzt tatsächlich von KI helfen lassen.

        Den Helfern in Selfhtml möchte ich aber für Ihre Geduld danken.

        Tschüs Gaby

        1. @@Gabriele

          Hallo Winfried,
          danke für den Tipp.

          Nur dass die Antwort nicht zu deiner Frage passte.

          Ich habe inzwischen in KI einige Anfragen zu Flex- und Gridstrukturen gestellt.

          Meine bisherigen Anfragen wurden zu 100% richtig beantwortet, einschließlich komplettem CSS/HTML-Code.

          Welche KI verwendest du? Doch nicht etwa ChatGPT? Das Ding ist saudumm und verlogen – eben noch mal getestet.

          Sagen wir so: Deine bisherigen Anfragen wurden zu 100% beantwortet. Ob sie gut beantwortet wurden, vermagst du nicht zu beurteilen.

          Ich fürchte, dass SELFHTML schon in Kürze obsolet wird oder nur noch als Input für KI-Systeme dient.

          Dass die Anzahl der Fragen hier im Forum immer weiter abnimmt, mag auch mit dem Aufkommen von KI zu tun haben. Und dass viele einfach alles glauben, was KI so ausspuckt.

          Da ich meine Anwendung schnell realisieren möchte, ohne stundenlang den oft ausschweifenden Text in Selfhtml lesen zu müssen,

          Schnell mal etwas zusammenzuschustern auf der einen Seite und zu lernen, wie man’s richtig macht, auf der anderen, sind zwei verschiedene Dinge. Oftmals gegensätzliche.

          werde ich mich jetzt tatsächlich von KI helfen lassen.

          Wenn altertümlicher Code für dich gut genug ist … Denn von neuen Features in HTML und CSS hat KI nicht die blasseste Ahnung.

          🖖 Live long and prosper

          --
          “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
          — Bruce Springsteen, Manchester 2025-05-14
      2. @@Winfried

        1. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

        Folgendes einfache Beispiel hat mir KI ausgespuckt, und es funktioniert!

        Nein, das tut es nicht:

        Ich habe lediglich bei dem div um den Button style="text-align:center;" entfernt (Codepen). Gabrieles Anforderung ist: „egal wo sich letzterer [der Button] befindet“.

        🖖 Live long and prosper

        --
        “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
        — Bruce Springsteen, Manchester 2025-05-14
      3. @@Winfried

        1. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

        Folgendes einfache Beispiel hat mir KI ausgespuckt, und es funktioniert!

        Abgesehen davon, dass es nicht funktioniert, wird da ein Haufen JavaScript verwendet, wo man genau gar kein JavaScript braucht. Das geht mit CSS, wie ich vor einer Woche schon sagte.

        ☞ Codepen

        Aber davon weiß die Ki wohl noch nichts, weil sie keine blasse Ahnung von CSS hat. S.a. meine Unterhaltung mit ChatGPT.

        (Ergänzung: ein neuer Versuch)

        🖖 Live long and prosper

        --
        “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
        — Bruce Springsteen, Manchester 2025-05-14
        1. @@Gunnar Bittersmann

          Das geht mit CSS, wie ich vor einer Woche schon sagte.

          ☞ Codepen

          Die Variante hätte ich auch schon vor einer Woche anbieten können. Da sie aber keine Lösung für das Problem „egal wo sich [der Button] befindet“ ist, hatte ich das nicht getan.

          Jetzt habe ich aber doch noch eine Lösung gefunden: ☞ Codepen 1

          Oder von der anderen Seite: ☞ Codepen 2

          🖖 Live long and prosper

          Nachtrag: Meine Versuche, auf transition zu verzichten und die halbe Breite stattdessen mit in die Berechnung von clamp() zu ziehen, schlugen fehl. ☞ Codepen 1a

          left: calc(anchor(center) - <length>) kann man machen; clamp(<length>, anchor(center) - <length>, <length>) aber nicht? Übersehe ich da was? Oder ist das noch nicht in Browsern implementiert?

          --
          “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
          — Bruce Springsteen, Manchester 2025-05-14
          1. @@Gunnar Bittersmann

            Die Variante hätte ich auch schon vor einer Woche anbieten können. Da sie aber keine Lösung für das Problem „egal wo sich [der Button] befindet“ ist, hatte ich das nicht getan.

            Jetzt habe ich aber doch noch eine Lösung gefunden: ☞ Codepen 1

            Oder von der anderen Seite: ☞ Codepen 2

            Nachtrag: Meine Versuche, auf transition zu verzichten und die halbe Breite stattdessen mit in die Berechnung von clamp() zu ziehen, schlugen fehl. ☞ Codepen 1a

            Heute bin ich in MDN auf Zentrierung auf dem Anker mit anchor-center gestoßen. Damit geht’s dann – also weder transition noch clamp(), sondern einfach justify-self: anchor-center.

            ☞ Codepen 3

            🖖 Live long and prosper

            --
            In our chants of “ICE out now”
            Our city’s heart and soul persists
            Through broken glass and bloody tears
            On the streets of Minneapolis

            — Bruce Springsteen, Streets of Minneapolis
            1. Guten Morgen,

              Heute bin ich in MDN auf Zentrierung auf dem Anker mit anchor-center gestoßen. Damit geht’s dann – also weder transition noch clamp(), sondern einfach justify-self: anchor-center.

              ☞ Codepen 3

              Die Technik hat @JürgenB bereits im Oktober 2025 im Wiki dokumentiert und auf einem Stammtisch vorgestellt:

              Sollte man die von @Rolf B vorgeschlagene Flyout-Navigation auch damit ausstatten?

              Herzliche Grüße
              Matthias Scharwies

              1. @@Matthias Scharwies

                Heute bin ich in MDN auf Zentrierung auf dem Anker mit anchor-center gestoßen. Damit geht’s dann – also weder transition noch clamp(), sondern einfach justify-self: anchor-center.

                ☞ Codepen 3

                Die Technik hat @JürgenB bereits im Oktober 2025 im Wiki dokumentiert und auf einem Stammtisch vorgestellt:

                Nein. Von justify-self: anchor-center ist da nichts zu finden.

                Darum ging’s hier, nicht um anchor positioning im Allgemeinen, worauf ich bereits in meinem ersten Posting hier im Thread verwiesen habe – incl. genau diesem Link ins SELFHTML-Wiki.

                🖖 Live long and prosper

                --
                In our chants of “ICE out now”
                Our city’s heart and soul persists
                Through broken glass and bloody tears
                On the streets of Minneapolis

                — Bruce Springsteen, Streets of Minneapolis
  5. Hallo Gabriele,

    ich lese seit Samstag mit und will jetzt versuchen, dir das Tutorial im Wiki schmackhaft zu machen:

    Es erklärt, wie man eine Flyout-Navigation erstellt, die barrierefrei und benutzerfreundlich ist.

    Dabei wird auch gezeigt, wie man heute ein Hamburger-Icon erzeugt:

    Das Tutorial ist vor 2 Jahren zum letzten Mal aktualisiert worden und öffnet die Links deshalb mit JavaScript. Das ist nicht falsch, wird in ein paar Jahren aber nicht mehr nötig sein.

    Am Ende findest du eine Variante mit details/summary, die die Linkliste direkt unterhalb des Nav-Icons öffnet.

    Popover und Anchor positioning werden da bald eine Alternative - die Positionierung geht derzeit aber noch nicht im Firefox.

    1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
      Warum klappt dies nicht?

    Die Frage ist eher, ob das benutzerfreundlich ist. Normalerweise will ich die Linkliste sofort sehen.

    1. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

    Siehe die entsprechende Stelle im Tutorial.

    Die ul befindet sich unterhalb des buttons, deshalb ist auch dort psoitioniert. Man könnte die ul oberhalb des Texts darstellen, dann wäre dieser aber im geöffneten Zustand verdeckt.

    Herzliche Grüße
    Matthias Scharwies

  6. problematische Seite

    Guten Morgen!

    1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
      Warum klappt dies nicht?

    2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

    Gabriele hatte – wie viele andere auch – die zuerst vorgestellte JavaScript-Version zugunsten des „einfacheren“ Aufklappen mit details ignoriert.

    Mittlerweile würde ich ein solches Flyout-Menü mit popover ohne JavaScript realisieren.

    Heute bin ich in MDN auf Zentrierung auf dem Anker mit anchor-center gestoßen. Damit geht’s dann – also weder transition noch clamp(), sondern einfach justify-self: anchor-center.

    Die Technik hat @JürgenB bereits im Oktober 2025 im Wiki dokumentiert und auf einem Stammtisch vorgestellt:

    Sollte man die von @Rolf B vorgeschlagene Flyout-Navigation auch damit ausstatten?

    @JürgenB @all Hat jemand Zeit und Lust, diese Flyout-Navigation mit popover neu zu erstellen?

    Evtl. könnte man diesen Artikel dort verlinken / die Erkenntnise einarbeiten?

    Herzliche Grüße
    Matthias Scharwies

    1. problematische Seite

      Hallo Matthias,

      @JürgenB @all Hat jemand Zeit und Lust, diese Flyout-Navigation mit popover neu zu erstellen?

      so etwas habe schon vor einiger Zeit erstellt:

      https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor

      Das funktioniert inzwischen in allen aktuellen Browsern. Wenn auch ältere Browser unterstützt werden sollen, muss position-anchor: auto; ersetzt werden, was etwas mehr html und css benötigt, und evtl. auch einen Polyfill.

      Gruß
      Jürgen

      1. problematische Seite

        Servus!

        Hallo Matthias,

        @JürgenB @all Hat jemand Zeit und Lust, diese Flyout-Navigation mit popover neu zu erstellen?

        so etwas habe schon vor einiger Zeit erstellt:

        https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor

        Das funktioniert inzwischen in allen aktuellen Browsern. Wenn auch ältere Browser unterstützt werden sollen, muss position-anchor: auto; ersetzt werden, was etwas mehr html und css benötigt, und evtl. auch einen Polyfill.

        Also noch 2 Monate warten, bis man das ohne Polyfill zeigen und erklären kann?

        Herzliche Grüße
        Matthias Scharwies

        1. problematische Seite

          Hallo Matthias,

          Also noch 2 Monate warten, bis man das ohne Polyfill zeigen und erklären kann?

          es funktioniert ja, nur werden die Untermenüs „irgendwo“ eingeblendet. Wie lange es dauert, bis genügend viele Surfer ihre Browser aktualisiert haben, kann ich nicht beurteilen.

          Zeigen und erklären kann man das jetzt schon, aber eben mit dem Hinweis auf die schlechte Unterstützung alter Browser.

          Gruß
          Jürgen

          1. problematische Seite

            Servus!

            Hallo Matthias,

            Also noch 2 Monate warten, bis man das ohne Polyfill zeigen und erklären kann?

            es funktioniert ja, nur werden die Untermenüs „irgendwo“ eingeblendet. Wie lange es dauert, bis genügend viele Surfer ihre Browser aktualisiert haben, kann ich nicht beurteilen.

            Zeigen und erklären kann man das jetzt schon, aber eben mit dem Hinweis auf die schlechte Unterstützung alter Browser.

            Na, denn man to! (Falls du Zeit hast und die Straßen noch zu glatt zu Rennradfahren sind!)

            Herzliche Grüße
            Matthias Scharwies

            1. problematische Seite

              Hallo,

              Na, denn man to!

              Wo bist du denn von wech? Min Fadding secht jümmer „denn man tau!“…

              Gruß
              Kalk