thementholist: Problem mit Script

039

Problem mit Script

  1. 0
  2. 0

    Triple-Posting

    1. 0
      1. 0
        1. 1
  3. 0
    1. 0
      1. 0
        1. 0
          1. 0
          2. 0
          3. 0
            1. 0
              1. 0
            2. 0
  4. 0
    1. 0
    2. 0
      1. 0
        1. 0
          1. 0
            1. 0
              1. 0
                1. 0
                  1. 0
              2. 0
          2. 0
            1. 0
              1. 0
          3. 0
            1. 0
              1. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
                        1. 0
                          1. 0

Hey Leute!

Ich habe ein Pop-Up Menu erstellt mit Icons die mit dem hover effect ausgestattet sind. Das Problem is nur: Ich sollte ne One Page Seite machen und sobald ich ein html tag in die CSS einfüge und der dann einen height wert von 100% gebe, geht der hover effekt verloren.

Ich bin erst Anfänger aber was bitte hat die Größe der Seiten mit dem hover effekt zu tun?

Der Code: https://codepen.io/thementholist/pen/pBYWbV

LG TM

  1. Hallo thementholist,

    Links setzt man in <spitze Klammern>, dann sind sie auch klickbar. Ich habe das bei Dir geändert.

    Rolf

    -- sumpsi - posui - clusi
  2. problematische Seite

    Lieber thementholist,

    es hat überhaupt keinen Sinn Dir zu helfen, weil Du nie wieder in Deinen ursprünglichen Thread schaust, sondern zu jedem neuen Fitzelchen an Unklarheit einen neuen startest. Du wurdest bereits darauf hingewiesen, dass Du bitte in Deinem ursprünglichen Thread bleiben sollst.

    Liebe Grüße,

    Felix Riesterer.

    1. problematische Seite

      Hallo Felix,

      ich bin gespannt, ob diesmal ein Dialog zu Stande kommt oder der Thread wieder verwaist...

      Rolf

      -- sumpsi - posui - clusi
      1. problematische Seite

        Ich habe erwähnt das ich gerade mal vor ner Woche angefangen habe. Bringt mir nichts wenn Profis sich unter meinem Thread über die Struktur der Webseite mit komplizierten Begriffen darüber diskutieren die mir (wie man sich vorstellen kann) sowieso überhaupt nichts sagen. Ich habe versucht mitzukommen aber mein Kopf ist dabei durchgebrannt daher habe ich das so stehen lassen. Diesmal bitte in einer Sprache die Jemand verstehen kann der gerade neu damit begonnen hat.

        1. problematische Seite

          Tach!

          Bringt mir nichts wenn Profis sich unter meinem Thread über die Struktur der Webseite mit komplizierten Begriffen darüber diskutieren die mir (wie man sich vorstellen kann) sowieso überhaupt nichts sagen. Ich habe versucht mitzukommen aber mein Kopf ist dabei durchgebrannt daher habe ich das so stehen lassen.

          Es ist dann an dir, ein wenig steuernd ins Geschehen einzugreifen. Nicht in dem Sinne, die andere Diskussion abzuwürgen, sondern wieder mehr Augenmerk auf deine Sache zu lenken. Dabei darf man durchaus auch mal nachfragen, wenn man etwas nicht versteht. Aus einer Nichtantwort kann man nämlich nicht entnehmen, aus welchen Gründen sie unterblieb.

          Diesmal bitte in einer Sprache die Jemand verstehen kann der gerade neu damit begonnen hat.

          Wir wissen nicht, welche du bereits kennst und welche nicht, und du wirst die Fachbegriffe lernen müssen. Fachbegriffe sind da, damit man effizient und meist auch effektiv kommunizieren kann. Auf Begriffe zu verzichten, die eventuell nicht verstanden werden könnten, macht die Kommunikation umständlich. Deshalb bitte nachlesen und nachfragen, wir erklären es dann.

          dedlfix.

  3. Hallo thementholist,

    zuerst mal ein paar Hinweise.

    1. es wird sicherlich daran liegen, dass Du deine Seite einfach in den Pen kopiert hast - aber normalerweise setzt man JavaScript in den Script-Bereich des CodePen. Aber es funktioniert ja auch so.

    2. zu deinen Menütexten: HOME, SERVICE, und so weiter. Falls Du die Seite irgendwann bedienbar (= für alle bedienbar, auch Leute mit Screen-Readern) haben willst, dann ändere diese Text in normale Schreibung, und zeige den Text mittels CSS als Großbuchstaben an. Dafür fügst Du der Regel für .text noch die Eigenschaft text-transform: uppercase; hinzu.

    3. statt <div id="header"><div class="header">...</div></div> ist sicherlich ein einzelnes <header> Element besser. Das div mit id="header" scheint mir auch von nichts angesprochen zu werden, es müsste unnötig sein.

    4. Dein Header ist fixed. Das bedeutet, dass er aus dem normalen Seitenfluss herausgenommen ist und deine Inhalts-Sections dahinter erscheinen. Entweder gibst Du deinen Inhaltssections einen passenden margin-top, oder Du überlegst Dir eine andere Art der Seitenaufteilung (z.B. ein Grid).

    Zu deinem Problem: Wo ist es denn? Das Menü verhält sich auf Mausbefehle so, wie es vermutlich soll. Was funktioniert nicht? Zeig doch mal eine Codepen-Variante, die Probleme macht.

    Rolf

    -- sumpsi - posui - clusi
    1. Das hier ist die variante, die mir probleme bereitet:

      https://codepen.io/thementholist/pen/pBYWbV

      Hier habe ich lediglich "html" zu dem bodytag(html,body) im css hinzugefügt um eine Height von 100% zu haben. Wieso? Weil ich das auf einem Tutorial auf Youtube gesehen habe (wie man eine One-Page erstellt) Wie du siehst ist hier aber der hover effekt nun verloren gegangen. Ich würde es nicht nur gerne gelöst haben..sondern auch verstehen wieso zum Teufel das passiert. Wieso beeinflusst die Größe der Seite überhaupt den menu hover effekt ?!?

      1. https://codepen.io/thementholist/pen/NmmgxB

        und hier die variante wo der hover effekt verloren geht:

        https://codepen.io/thementholist/pen/PggjzE

        1. Lieber thementholist,

          Du bleibst also nicht in Deinem Ursprungsthread. Schade. Aber na gut. Ich habe eine Variante gebaut, die Du gerne testen kannst:

          [tastaturbedienbares Honeycomb-Menü]

          Liebe Grüße,

          Felix Riesterer.

          1. VIELEN VIELEN DANK!!!! Seit 2 Tagen bin ich schon dran..ich weiß zwar nicht wieso es mit dem anderen menu nicht geklappt hat..aber mit deinem scheint es zu funktionieren(mit 100% height). Ich küsse deine Augen!

          2. Wie kann ich dieses Menü in die Mitte der Seite plazieren?

          3. @@Felix Riesterer

            [tastaturbedienbares Honeycomb-Menü]

            Ein paar Anmerkungen:

            • Der Zustand des Toggle-Buttons sollte in seinem aria-expanded-Attribut festgehalten werden, dann haben auch Nutzer assisitver Technologien (wie Screenreader) was davon. Das lässt sich dann auch zum Stylen verwenden; eine Klasse "open" braucht man nicht. Fürs ul-Element auch nicht; das lässt sich als nachfolgendes Geschwisterelement des Buttons selektieren.

            • Deine Animation läuft wegen der Änderung des z-Indexes nicht flüssig. Besser geht’s so: dafür sorgen, dass der Button immer vor den Menüpunkten ist und die sich einfach dahinterschieben. Die dürfen dann natürlich nicht −1 als z-Index haben, da die Links ja clickbar sein müssen. Button und Listitems in denselben Stapelkontext bringen, dann genügt z-index: 1 für den Button.

            • Deine Sechsecke sind darüber und darunter nicht clickbar, wohl aber neben den Schrägen (rechteckige Clickfläche). Die Sechsecke setzt man besser (und einfacher!) mit clip-path: polygon() um – und dann ist auch nur die Sechseckfläche clickbar.

            • Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein. Entweder man setzt bei geschlossenem Menü für alle Links tabindex="-1" und bei geöffnetem Menü tabindex="0" – oder man versteckt das Menü richtig (hidden-Attribut), sodass die Links nicht mehr erreichbar sind. (Das aber nicht gleich beim Click auf den Button, denn die Transition soll ja erstmal laufen. Da muss man auf Transition-Events lauschen.)

            • Deine Transition läuft um einiges zu langsam. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen.

             

            Ich hab die Überlegungen in ☞ mein Beispiel beehive navigation einfließen lassen. Anmerkungen dazu:

            • Von den Berechnungen der Breite und Positionen der Sechsecke stehen nicht die Ergebnisse in nicht nachvollziehbaren Zahlen im Code, sondern die Formeln selbst – mit custom properties. So lassen sich --height und --gap an einer Stelle ändern, ohne dass irgendwas anderes angepasst werden muss. (Auch der Wert √3 ist als custom property hinterlegt. Statt --SQRT3 hätte ich übrigens auch --√3 schreiben können. Auf die Berechnung der Wurzel mit CSS hab ich hier verzichtet. Wie das geht, hab ich in der letzten Viertelstunde meines Vortrags auf dem Webkongress Erlangen erzählt.)

            • Da das nur in Browsern funktioniert, die custom properties unterstützen (also nicht im IE ≤ 11), wird ebendies mit @supports() abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (progressive enhancement). Und da das Auf-/Zuklappen nur mit JavaScript funktioniert, erfolgt das Styling über den Attributsensor [data-javascript-enabled="true"] nur, wenn das JavaScript auch ausgeführt wird und dieses Attribut gesetzt wurde. Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

            • Zur Änderung der Position der Menüpunkte beim Auf-/Zuklappen muss nicht die transform-Eigenschaft geändert werden, sondern lediglich --radius. (Bei transition muss allerdings transform angegeben werden.)

            • Damit die Transition funktioniert, darf das Ausblenden des Menüs nicht über display: none erfolgen (Default für [hidden]), sondern über visibility: hidden.

            • Damit die Transition funktioniert, darf das hidden-Attribut für die Dauer der Transition nicht gesetzt sein. Deshalb wird es beim transitionrun-Event gelöscht (da kein Delay im Spiel ist, ginge auch transitionstart) und erst beim Eintreten von transitionend auf den entsprechenden Folgewert gesetzt. Das funktioniert im Firefox, aber nicht im Chrome 73, der zwar transitionend kennt, aber nicht transitionrun und transitionstart.

              Das Löschen des hidden-Attributs darf man aber nicht einfach ans click-Event des Buttons binden, da dies nur geschen darf, wenn die Transition wirklich ausgeführt wird, nicht aber, wenn z.B. ein Nutzer in seinem Browser Animationen ausgestellt hat. Ansonsten würde – da dann ja kein transitionend feuert – der Folgewert nicht gesetzt werden. Als möglichen Workaround hatte ich bei transitionend ein Flag gesetzt und damit ab dem zweiten Aufklappen die Transition ermöglicht.

              Der entsprechende Code ist jetzt auskommentiert; nach Update auf 74 kann auch Chrome transitionrun und transitionstart. Update des Safari steht noch aus, ebenso der Test im Edge.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Lieber Gunnar,

              Ein paar Anmerkungen:

              vielen Dank! Wieder etwas dazu gelernt.

              • Der Zustand des Toggle-Buttons sollte in seinem aria-expanded-Attribut festgehalten werden, dann haben auch Nutzer assisitver Technologien (wie Screenreader) was davon. Das lässt sich dann auch zum Stylen verwenden; eine Klasse "open" braucht man nicht. Fürs ul-Element auch nicht; das lässt sich als nachfolgendes Geschwisterelement des Buttons selektieren.

              Da sieht man, dass ich in Sachen ARIA (oder a11y) noch recht unbeleckt bin. Natürlich kann man sich so die Klasse sparen, aber assistive Technologien haben davon noch viel mehr als ich.

              • Deine Animation läuft wegen der Änderung des z-Indexes nicht flüssig. Besser geht’s so: dafür sorgen, dass der Button immer vor den Menüpunkten ist und die sich einfach dahinterschieben. Die dürfen dann natürlich nicht −1 als z-Index haben, da die Links ja clickbar sein müssen. Button und Listitems in denselben Stapelkontext bringen, dann genügt z-index: 1 für den Button.

              Ähm, das verstehe ich nicht. Wie bringe ich sie in denselben Stapelkontext?

              • Deine Sechsecke sind darüber und darunter nicht clickbar, wohl aber neben den Schrägen (rechteckige Clickfläche). Die Sechsecke setzt man besser (und einfacher!) mit clip-path: polygon() um – und dann ist auch nur die Sechseckfläche clickbar.

              Diese Tricks sind mir noch unbekannt. Ich gestalte mit CSS nicht auf diesem künstlerischen Niveau. Mein Beispiel basiert völlig auf dem CSS-Code des OP. Und wie sieht es mit der Unterstützung durch die Browser aus? Wie sieht hier z.B: eine graceful degradation aus?

              • Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein.

              Warum nicht? Wer nix sieht, braucht auch den Klapp-Mechanismus nicht. Dann dürfen die Links gerne durch-tab-bar sein. Findest Du nicht?

              Entweder man setzt bei geschlossenem Menü für alle Links tabindex="-1" und bei geöffnetem Menü tabindex="0" – oder man versteckt das Menü richtig (hidden-Attribut), sodass die Links nicht mehr erreichbar sind. (Das aber nicht gleich beim Click auf den Button, denn die Transition soll ja erstmal laufen. Da muss man auf Transition-Events lauschen.)

              Ist das den Aufwand wirklich wert?

              • Deine Transition läuft um einiges zu langsam. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen.

              Auch hier blieb ich bei der Vorgabe durch den Code im OP. Aber gut zu wissen, dass es diese Faustregel gibt!

              Ich hab die Überlegungen in ☞ mein Beispiel beehive navigation einfließen lassen.

              Sehr chic! Gefällt mir sehr gut.

              • Von den Berechnungen [...] die Formeln selbst – mit custom properties.

              Wie sieht es hier mit der Browser-Unterstützung aus? Und wie degradiert das gracefully?

              • Da das nur in Browsern funktioniert, die custom properties unterstützen (also nicht im IE ≤ 11), wird ebendies mit @supports() abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (progressive enhancement).

              Aha! Sehr wichtiger Hinweis. Finde ich gut. Wer IE will, will keinen neumodischen Schnickschnack, sondern leiden. :-/

              Und da das Auf-/Zuklappen nur mit JavaScript funktioniert, erfolgt das Styling über den Attributsensor [data-javascript-enabled="true"] nur, wenn das JavaScript auch ausgeführt wird und dieses Attribut gesetzt wurde.

              Ja, so weit bin ich in meinem Beispiel leider noch nicht gegangen. Das hätte ich aber sollen.

              Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

              Warum nicht mit JS ins DOM gesetzt?

              • Zur Änderung der Position der Menüpunkte beim Auf-/Zuklappen muss nicht die transform-Eigenschaft geändert werden, sondern lediglich --radius. (Bei transition muss allerdings transform angegeben werden.)

              Also kann man auch custom properties transformieren lassen... cool!

              • Damit die Transition funktioniert, darf das hidden-Attribut für die Dauer der Transition nicht gesetzt sein. Deshalb wird es beim transitionrun-Event gelöscht (da kein Delay im Spiel ist, ginge auch transitionstart) und erst beim Eintreten von transitionend auf den entsprechenden Folgewert gesetzt. Das funktioniert im Firefox, aber nicht im Chrome 73, der zwar transitionend kennt, aber nicht transitionrun und transitionstart.

              Ohweh, das sind für mich noch alles böhmische Dörfer.

              Der entsprechende Code ist jetzt auskommentiert; nach Update auf 74 kann auch Chrome transitionrun und transitionstart. Update des Safari steht noch aus, ebenso der Test im Edge.

              Ich sehe also, dass die Unterstützung für alle Browser in Deinem Beispiel nicht gegeben ist. Aber ob meines in einem IE läuft, habe ich auch nicht getestet. War mir irgendwie völlig egal... ;-)

              Liebe Grüße,

              Felix Riesterer.

              1. @@Felix Riesterer

                Jetzt muss ich mir doch endlich mal ein paar Minuten Zeit nehmen zu antworten. Ich bin noch nicht dazu gekommen, an dem Ding weiterzubauen und auch auf @1unitedpower⁠s Anmerkungen einzugehen. Man hat ja neben der Arbeit auch noch andere Baustellen. 😉

                Button und Listitems in denselben Stapelkontext bringen, dann genügt z-index: 1 für den Button.

                Ähm, das verstehe ich nicht. Wie bringe ich sie in denselben Stapelkontext?

                Wenn ich das wüsste! Irgendwie war es mir geglückt. Eine position an der richtigen Stelle? (No pun intended.)

                clip-path: polygon()

                Und wie sieht es mit der Unterstützung durch die Browser aus?

                Schlechter als ich dachte. Edge ist noch nicht dabei.

                Wie sieht hier z.B: eine graceful degradation aus?

                Man könnte die Schrägen visuell irgendwie hinfrickeln (z.B. mit linear-gradient). Die rechteckigen Schaltflächen könnten sich aber doch als Problem erweisen, insb. wenn die Sechsecke so dicht zusammen sind, dass sich die Rechtecke überlagern. Dann kann ein Click auf ein vermeintliches Sechseck auf ein falsches Rechteck gehen – miserable UX, wenn man nicht dort landet, wo man hin wollte.

                Man könnte aber auch mal Sechs(eck)e gerade sein lassen. (No pun intended wirst du mir hier nicht glauben?) Die Wabendarstellung ist progressive enhancement; Browser, die das nicht können, stellen das Menü als Liste dar. Betrifft wohl hauptsächlich IE (geschenkt) und Edge – letzteres wird sich wohl erledigt haben, wenn Edge demnächst ein Chromium wird.

                • Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein.

                Warum nicht? Wer nix sieht, braucht auch den Klapp-Mechanismus nicht.

                Was hat nix sehen mit Tastatursteuerung zu tun? Viele, die nichts sehen, werden vermutlich Tastatursteuerung verwenden (aber auch anderes ist denkbar: Sprachsteuerung bspw.). Aber nur ein kleiner Teil derer, die Tastatursteuerung verwenden, sieht nichts.

                Auch nur ein Teil derer, die Screenreader verwenden, sieht nichts. Die Bandbreite geht von nichts sehen bis uneingeschränkt sehen, aber bspw. Legastheniker oder Analphabet.

                Dann dürfen die Links gerne durch-tab-bar sein. Findest Du nicht?

                Nein. Das verwirrt sehende Tastaturnutzer.

                Entweder man setzt bei geschlossenem Menü für alle Links tabindex="-1" und bei geöffnetem Menü tabindex="0" – oder man versteckt das Menü richtig (hidden-Attribut), sodass die Links nicht mehr erreichbar sind.

                Ist das den Aufwand wirklich wert?

                Wenn man das Öffnen/Schließen animieren möchte, muss man den Aufwand wohl betreiben. Wenn man ihn scheut, muss man auf die Animation verzichten.

                custom properties.

                Wie sieht es hier mit der Browser-Unterstützung aus?

                Inzwischen sehr gut. IE nicht, na und?

                Und wie degradiert das gracefully?

                Nicht. Fallback auf Listendarstellung.

                Wer IE will, will keinen neumodischen Schnickschnack, sondern leiden. :-/

                Eben. Oder anders gesagt: eben nicht! Der IE-Nutzer leidet ja nicht unter einer voll benutzbaren Seite, sondern freut sich seines Lebens, dass er alles bedienen kann.

                Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

                Warum nicht mit JS ins DOM gesetzt?

                Geht auch. Ist vielleicht aber mehr Aufwand. Und ein Attribut eines im DOM vorhandenen Elements umzuschalten dürfte performanter sein als ein Element erst ins DOM zu setzen.

                So, Arbeit ruft. Und mit der CSSBattle komme ich auch nicht so richtig voran …

                LLAP 🖖

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              • Da das nur in Browsern funktioniert, die custom properties unterstützen (also nicht im IE ≤ 11), wird ebendies mit @supports() abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (progressive enhancement). Und da das Auf-/Zuklappen nur mit JavaScript funktioniert, erfolgt das Styling über den Attributsensor [data-javascript-enabled="true"] nur, wenn das JavaScript auch ausgeführt wird und dieses Attribut gesetzt wurde. Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

              Was ist mit dem Fall, dass der Browser keine Custom-Properties unterstüzt, aber das JavaScript ausgeführt wird. Dann könnte man den Button erst nach einer Feature-Abfrage aktivieren:

              button.hidden = !CSS.supports('--custom-property: 0')

              Oder man verzichtet auf Custom-Properties und benutzt stattdessen einen Preprozessor, das spart die Feature-Abfrage in CSS und in JavaScript und man dürfte damit noch ältere Browser erreichen.

  4. Habe gelernt wie ich das Menü in die Mitte platzieren kann und das scrolling ebenso ignoriert wird. Allerdings neues Problem : Die obere Hälfte steht im Hintergrund.

    Habe auch probiert dem nav.honey eine z-index 1-100 zu geben..vergeblich steht immer noch im Hintergrund. Das seltsame ist das wenn Ich die Position auf absolute stelle, bleiben die Elemente dort wo sie bleiben müssen.

    https://codepen.io/pen

    Lg TM

    1. ups das ist der codepen: https://codepen.io/thementholist/pen/LvorYJ

      Edit: Schon wieder verlinkt. Das nächste mal machst du das selbst.

    2. Hallo thementholist,

      okay, mit Felix' Lösung bin ich an einer Stelle noch unglücklich: die Waben flackern in Chrome und Firefox (nicht in Edge), wenn sich das Menü öffnet oder schließt. Das liegt am

      nav.honey ul.open li { z-index: 0; }

      in honey-navi.css. Nimmt man die Regel weg, flackert nichts mehr (Chrome, FF, Edge). Ich weiß aber nicht, welcher Sonderfall von dieser Regel abgedeckt wurde, es mag unterm Strich bei anderen Browsern kontraproduktiv sein.

      Der Unterschied zwischen deiner Lösung und der von Felix ist position:fixed vs position:relative. In einem position:relative-Element lassen sich child-Elemente offenbar per z-order hinter das Container-Element legen, in einem position:fixed-Element nicht. Es müsste ein spec Speci wie @Gunnar Bittersmann her, um zu erklären, warum das so ist oder ob das ein Bug ist. Ich weiß es nicht.

      Muss es denn position:fixed sein? Ggf. kannst Du einen Container um die Navigation herumlegen, der fixed ist, und darin ist dann das - hoffentlich - funktionierende Menü mit position:relative.

      Rolf

      -- sumpsi - posui - clusi

      Folgende Nachrichten verweisen auf diesen Beitrag:

      1. nav.honey ul.open li {

        z-index: 0; }

        in honey-navi.css. Nimmt man die Regel weg, flackert nichts mehr (Chrome, FF, Edge). Ich weiß aber nicht, welcher Sonderfall von dieser Regel abgedeckt wurde, es mag unterm Strich bei anderen Browsern kontraproduktiv sein.

        Wenn ich das wegnehme geht der hover effekt verloren. bei position: relative .

        Und bei position: "sticky" und "absolute" funktioniert es auch ohne "z-index: 0;" Aber da habe ich eben wieder das selbe Problem das die child-Elemente(die schwarzen honeycombs halt😂) wieder im oberen Container überlappen.

        Muss es denn position:fixed sein?

        Eigentlich schon. Ich hätte gerne dass, das Menü beim scrollen mitfolgt. Wäre es ansonsten vielleicht möglich die nav per position "sticky" so zu benützen das es nicht wegscrollt und immer unter meinem header bereich bleibt(wäre ja dann das selbe denke ich..aber was weiß ich schon)

        Ggf. kannst Du einen Container um die Navigation herumlegen, der fixed ist, und darin ist dann das - hoffentlich - funktionierende Menü mit position:relative.

        Wie macht man den genau so einen Container? Und soll dieser Container dann in meine honey-navi.css ,die main css oder im html eingesetz werden? Tut mir leid ich kenn mich wirklich leider 0 aus..habe bisher fast Alles mit Guides ausm Internet und eurer Hilfe erstellt.

        1. Hallo thementholist,

          du könntest das Folgende machen - aber ich bin noch nicht überzeugt, dass da am Ende eine gute Bedienbarkeit rauskommt. Ein Menü, dass ständig in der Mitte sitzt? Willst Du den Inhalt systematisch drum herumfummeln, so dass das Menü keine Inhalte verdeckt? Aber das ist deine Sache...

          1. Einen Container um das nav Element herumlegen. Dem gebe ich die Klasse "beeHive", denn Honig findet man bekanntlich im Bienenstock 🐝🐝🐝. Das Innere des <nav> habe ich jetzt nicht abgeschrieben und durch ... angedeutet.

          <div class="beeHive"> <nav> ... </nav> </div>

          2. Den Bienenstock platzieren wir mit CSS fixed in die Bildschirmmitte:

          .beeHive { position: fixed; left: calc(50vw - 80px); top: calc(50vh - 70px); }

          calc ist eine CSS Funktion zum Berechnen von CSS Maßen. Das Minus muss von Leerzeichen umgeben sein! calc(50vw - 80px) bedeutet: 50% der Viewportbreite (Anzeigebereich vom Browser) minus 80 Pixel. Der linke Rand des .beeHive ist damit 80px links von der Fenstermitte, und weil das nav.honey 160px breit ist (ohne die hinausgeschobenen Menüpunkte), ist es damit genau horizontal zentriert. Wegen der Höhe von 140px berechnen wir den oberen Rand dementsprechend mit calc(50vh - 70px). Die Größe des beeHive gebe ich nicht an, die ermittelt sich automatisch über den Inhalt. Wenn Du das Menü an einer anderen Stelle haben willst, ändere die Berechnung.

          3. Das nav.honey und nav.honey ul ändern wir so:

          nav.honey { border-bottom: 70px solid #fd4; border-left: 40px solid transparent; border-right: 40px solid transparent; position: relative; width: 80px; } nav.honey ul { list-style-type: none; margin: 0; padding: 0; }

          Die nav.honey ul Regel ist bei Dir drin, aber vom nav.honey etwas entfernt. Such sie dir raus und ändere sie, nicht einfach meine Regel hineinkopieren.

          Dem ul Element habe ich margin und padding 0 gegeben, weil sonst der Default-Margin des ul das Menü um einige Pixel nach unten schiebt und die Berechnung von top vermasselt.

          Und wie gesagt, das Folgende scheint unnötig. Wenn ich es entferne, ändert sich aus meiner Sicht kein Hover-Effekt. Ich bemerke in deinem Pen aber auch keinen Flackereffekt mehr. Keine Ahnung was da passiert.

          nav.honey ul.open li { z-index: 0; }

          Beachte auch bitte, dass das navi-js so gestrickt ist, dass es alle Klassen, die für nav.honey nötig sind, dynamisch nachlädt. Du musst diese Änderungen also in deiner Kopie von honey-navi.css machen.

          Ich hoffe, ich habe nichts vergessen 🤕

          Rolf

          -- sumpsi - posui - clusi
          1. Lieber Rolf,

            Ich hoffe, ich habe nichts vergessen 🤕

            vielleicht nur die Frage, ob das Verschachteln in ein umgebendes <div> wirklich notwendig oder sinnvoll ist.

            Liebe Grüße,

            Felix Riesterer.

            1. Hallo Felix,

              https://forum.selfhtml.org/self/2019/apr/29/problem-mit-script/1747761#m1747761

              Problem war, dass mit position:fixed das Verhalten von z-order anders ist als mit position:relative. Wenn Du es besser hinbekommst, zeig mal bitte.

              Rolf

              -- sumpsi - posui - clusi
              1. Lieber Rolf,

                Problem war, dass mit position:fixed das Verhalten von z-order anders ist als mit position:relative. Wenn Du es besser hinbekommst, zeig mal bitte.

                ich kann dieses Problem nicht lösen. Will man, dass das Menü immer sichtbar bleibt, dann hat man auf kleinen Viewports eben ein massives Problem. Wer so eine Spielerei haben muss, der will das eben so.

                Liebe Grüße,

                Felix Riesterer.

                1. Hallo Felix,

                  reden wir aneinander vorbei?

                  Du hast gefragt, warum ich ein Extra <div> um den <nav> Bereich vorgeschlagen habe. Ich habe das mit dem Nichtfunktionieren der z-order bei position:fixed erklärt, so dass ich position:fixed und das Honeycomb-Menü, das position:relative für die Flyouts braucht, trennen kann.

                  Wenn Du nun sagst, dass Du für dieses Problem keine bessere Lösung hast, warum stellst Du dann den Sinn des Extra-<div> in Frage?

                  Wenn Du den Sinn eines position:fixed Honeycomb-Menüs in Frage stellen willst, dann bin ich sofort bei Dir (steht auch irgendwo weiter oben). Das muss der OP für sich entscheiden. Aber wenn er's unbedingt will, dann weiß ich nur diese Lösung.

                  Rolf

                  -- sumpsi - posui - clusi
                  1. Lieber Rolf,

                    Wenn Du nun sagst, dass Du für dieses Problem keine bessere Lösung hast, warum stellst Du dann den Sinn des Extra-<div> in Frage?

                    wie Du korrekt vermutet hast, hatte ich Dich in diesem Detail nicht richtig verstanden.

                    Wenn Du den Sinn eines position:fixed Honeycomb-Menüs in Frage stellen willst, dann bin ich sofort bei Dir (steht auch irgendwo weiter oben).

                    Dann sind wir uns ja einig.

                    Liebe Grüße,

                    Felix Riesterer.

              2. @@Rolf B

                Problem war, dass mit position:fixed das Verhalten von z-order anders ist als mit position:relative. Wenn Du es besser hinbekommst, zeig mal bitte.

                In meinem Bienenstock kann ich problemlos relative durch fixed ersetzen. (gegenwärtig Zeile 20 im CSS).

                LLAP 🖖

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. Danke Danke Danke!! Hat funktioniert! Ich will die seite so gestalten das die Mitte immer frei bleiben wird.(wegen dem PopupMenü halt). Und die Elemente würde ich dann jeweils links und rechts platzieren auf jeder Seite.

            Will man, dass das Menü immer sichtbar bleibt, dann hat man auf kleinen Viewports eben ein massives Problem

            Oh nein was für ein Problem den? 😟

            1. @@thementholist

              Ich will die seite so gestalten das die Mitte immer frei bleiben wird.(wegen dem PopupMenü halt). Und die Elemente würde ich dann jeweils links und rechts platzieren auf jeder Seite.

              Wo genau meinst du mit „links und rechts“?

              LLAP 🖖

              -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. hahahahhaha 😂 Ich sehe wo das Problem ist und arbeite daran!

          3. @@Rolf B

            1. Einen Container um das nav Element herumlegen.

            Buh!

            Dem gebe ich die Klasse "beeHive", denn Honig findet man bekanntlich im Bienenstock 🐝🐝🐝.

            … auf Bäumen.

            Eines Tages, als er einen Spaziergang machte, kam er an eine freie Stelle inmitten des Waldes, und inmitten dieser Stelle stand eine große Eiche, und vom Wipfel des Baumes kam ein lautes Summgeräusch. Winnie-der-Pu setzte sich an den Fuß des Baumes, steckte den Kopf zwischen die Pfoten und begann zu denken.
            Zuallererst sagte er sich: »Dieses Summgeräusch hat etwas zu bedeuten. Es gibt doch nicht so ein Summgeräusch, das so einfach summt und summt, ohne daß es etwas bedeutet. Wenn es ein Summgeräusch gibt, dann macht jemand ein Summgeräusch, und der einzige Grund dafür, ein Summgeräusch zu machen, den ich kenne, ist, daß man eine Biene ist.«
            Dann dachte er wieder lange nach und sagte: »Und der einzige Grund dafür, eine Biene zu sein, den ich kenne, ist, Honig zu machen.«
            Und dann stand er auf und sagte: »Und der einzige Grund, Honig zu machen, ist, damit ich ihn essen kann.«
            Also begann er, den Honig-Baum hinaufzuklettern.

            (A.A. Milne, Pu der Bär)

            2. Den Bienenstock platzieren wir mit CSS fixed in die Bildschirmmitte:

            .beeHive { position: fixed; left: calc(50vw - 80px); top: calc(50vh - 70px); }

            Wo kommen die 80px und 70px her?

            Verständlicherer Code dürte das sein:

            { left: 50%; top: 50vh; transform: translate(50%, 50%); }

            Die Prozentangaben beziehen sich auf Breite bzw. Höhe des Elements.

            Und bei left muss die Angabe in %, nicht vw sein, wenn das Ding auch in der Mitte sein soll, wenn eine Scrollbar einen Teil der Breite beansprucht.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hi! Also Ich habe mich mit meinem Onkel hingesetzt und alles nochmals besprochen. Der Header soll doch fixed sein..habe ich umgestellt. Es wäre okey wenn der Button kleiner wäre und nicht unbedingt in der Mitte. Also habe ich die nav.honey verkleinert und im Header reingepackt. Jetzt stehen wir vor dem nächstem Problem: nachdem man auf den button klickt, erscheinen zwar die anderen buttons, jedoch ist die schöne Animation dadurch verloren gegangen.

              Habe ein Video gemacht damit ihr seht was ich meine (im Codepen habe ich es nicht geschaft): https://youtu.be/4Ioffp1-62U

              Und hier trotzdem noch die Codes: CODEPEN (Ich habe leider keine Ahnung wie ich auf Codepen 2 CSS Dateien anzeigen soll, weshalb ich einfach beide reingepackt habe)

              Liebe Grüße

              TheMentholist

              1. Hallo thementholist,

                ich lache mich tot. "TheMentholist" steht in Youtube, na klar. Was habe ich hier im Forum immer daraus gemacht: "Themen Tho List" - und mich gewundert, was das extra-h da sollte. Aua.

                Dein Codepen funktioniert nicht weil es das JavaScript nicht findet.

                <script src="js/mobile-menu.js"></script>

                Diese js Datei steht ja auf deinem PC. Du musst das Script an dieser Stelle inline in den HTML Bereich setzen, oder das Script in den JS Bereich des Pen kopieren.

                Das gleiche gilt für

                <script src="./honey-navi/honey-navi.js"></script>

                Wie Du es genau machen musst, hängt von den Scripten ab. Codepen stellt den Inhalt des JS Fensters an das Ende des <body>. Wenn das für Dich nicht taugst, musst Du die Script inline an die passende Stelle in den HTML Bereich schreiben.

                Bei Felix' honey-navi.js ist es, wenn ich das richtig sehe, egal wo es steht.

                Das Zusammenkopieren der CSS Dateien ist kein Problem, das kann man machen. Problematisch kann es sein, wenn CSS auf diese Weise aus einem anderen Verzeichnis geladen wird und Ressourcen aus dem CSS relativ angesprochen werden (z.B. dein Hintergrundbild), aber das ist im Pen jetzt egal.

                Rolf

                -- sumpsi - posui - clusi
                1. Habe es probiert aber sieht immer noch gleich aus: https://codepen.io/thementholist/pen/zQvzoq Kriege es nicht hin 😕

                  Lg Thementholist

                  1. Hallo thementholist,

                    wenn Du nicht tust worum ich gebeten habe, sondern was anderes, dann kann das auch nichts werden (leider ist die Umkehrung nicht zwingend richtig...).

                    Im JS Bereich wird kein HTML erwartet und schon gar nicht verstanden.

                    <script src="blabla.js"></script> ist HTML. Das hat im JS Bereich nichts zu suchen. Da muss der Inhalt der blabla.js Datei hin.

                    Und nun die erweiterte Anleitung 😀:

                    Achtung, das mit dem Kopieren gilt nicht für jQuery. Das lädst Du schon aus einer Internet-Ressource, und die kann man direkt einbinden. Dazu klickst Du auf das kleine Zahnrad oben links neben JS. Du bekommst einen Dialog mit 4 Eingabemöglichkeiten.

                    (1) JavaScript Preprocessor: Den lässt Du leer.
                    (2) Search CDNjs: Das Eingabefeld ist ein Fest für Gunnar 😂. Lass es leer. Da ist zwar auch ein jQuery bei, aber eine andere Version. Über Versionsinkompatibilitäten müssen wir nicht anfangen zu grübeln.
                    (3) Zwei Eingabefelder für andere Ressourcen. Trage in einem davon

                    https://code.jquery.com/jquery-1.12.4.min.js

                    ein.

                    Den Inhalt der beiden anderen Scripte kopierst Du hintereinander in das JS Feld. Vielleicht passt dann noch was nicht, aber das kriegen wir hoffentlich raus.

                    Im HTML Bereich nimmst Du die beiden <link href="..." rel="stylesheet"> Elemente von Google Fonts und kopierst sie in die Zwischenablage (ins Clipboard). Dann öffnest Du das Zahnrad-Menü von HTML und fügst das im Bereich "Stuff for <head>" ein.

                    Und nun löschst Du alles im HTML Bereich von <!doctype> bis <body>. Am Ende des HTML Bereichs löschst Du </body> und </html>.

                    JETZT hast Du einen Codepen. Du bekommst nämlich von codepen.io alles außer dem Body-Inhalt vorgegeben.

                    Rolf

                    -- sumpsi - posui - clusi
                    1. Vielen Dank! 😀👍 So hier nun der richtige Code: CODEPEN

                      LG TM

                      1. Ich kann meinen Beitrag nicht bearbeiten daher tuts mir Leid für den Doppelpost. Ich habe gerade auch bemerkt dass das scrollen auch nicht mehr so flüssig läuft. Keine Ahnung was ich da wieder verbockt habe..

                        1. Hallo thementholist,

                          Ja. Das tut mir leid. Wegen des Editierens (dafür muss man 2500 Karmapunkte gesammelt haben), und wegen Deines Problems.

                          Mehr kann man wohl nicht tun - es sei denn, der Codepen von vorgestern (KLdrNL) soll das Problem zeigen. Soll er?

                          Rolf

                          -- sumpsi - posui - clusi
                          1. Hi Rolf! Das Problem besteht komischerweise nur auf meiner Live-Vorschau-Seite. Ich vermute das das am Bild liegt, bin mir aber nicht sicher da der Pop-up ja auch spinnt 😕.

                            >So sieht das ganze aus<

                            Liebe Grüße TM✌️