Pseudoelemente ::before Content Animation?

  • Ich Wünsche einen schönen Guten Tag,


    ich bin gerade dabei mir eine Neue Webseite zu bauen und möchte mir für diese ein Hamburger Menü (Nur mit Menu & Close beschriftung) bauen mittels Checkbox-hack.

    Imgroßen und ganzen funtioniert dies auch recht gut, nur möchte ich das wenn ich den Menü Button nutze eine Animation ( z.b. Ein & ausblenden) abläuft.

    Ich habe den Butten Namen (Menu & Close) mittels des Pseudoelements ::before Content in den Menu Butten gepackt, bekomme es aber einfach nicht hin beim klicken auf dem Button einen smooth Effect ablaufen zu lassen.


    Meine Frage nun,

    Gibt es eine möglichkeit nur im CSS den ::before Content zu animimieren?


    Ich hoffe ich konnte meine Frage anständig Formolieren.


    MFG

  • ich bin gerade dabei mir eine Neue Webseite zu bauen und möchte mir für diese ein Hamburger Menü (Nur mit Menu & Close beschriftung) bauen mittels Checkbox-hack.

    Nein, möchtest du nicht: der Checkbox-Hack ist nicht barrierefrei und damit unbrauchbar.

  • Hey, danke für die schnelle Antwort.


    Ich bin nun leider nicht gerade ein Profi was das Coden von Webseiten angeht, lediglich Grundkenntnisse von Html & Css sind vorhanden.

    Wie genau muss ich das verstehen das der Checkbox-Hack nicht barrierefrei ist?

  • tk1234 Mal alles nicht so verkrampft sehen, soll doch auch Spaß machen ;)

    MitchX Sei unbesorgt, Barrierefreiheit ist wichtig für Behörden, Ämter etc. die dazu verpflichtet sind. Für eine private Homepage ist dieses Thema von untergeordneter Bedeutung.

  • Habe nun eine Lösung gefunden.

    Habe ein 2tes Label eingetragen & den checkbox Button in der css neu bearbeitet.







    Document


      Pagename

  • Ja habe gesehen , mit 2 labels.

    Ist auch eine Lösung.

    Habe bei dir gesehen das scal() mit Minus Werten das Element dreht.

    Das habe ich auch noch nie gesehen.

    Habe versucht den gleichen Animationseffekt bei mir einzubauen , habe es aber so nicht hinbekommen, weil sich das Element immer gedreht hat.

    Mit rotate gegen wirken sah blöde aus wenn es sich dreht.


    Mit ein Label und deinen Effekt kannst du noch @keyframes nutzen

    https://basti1012.bplaced.net/…rdner=html-seminar&id=484

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Die lösung gefällt mir besser ich danke dir :thumbup:

  • Habe nun mit deiner Variante etwas gespielt und habe den effect den ich mit 2 label hate nun mit einem hinbekommen ich danke dir.


    https://codepen.io/MitchX/pen/eYEggEb

  • Jo sieht doch gut aus.

    Warum das scale(-2) das auf den Kopf dreht habe ich immer noch nicht verstanden , ich dachte immer 0 ,oder unter 0 ist nicht mehr Sichtbar.

    Aber auch ok , muss ich mal Googeln warum, das so ist oder warum ich das falsch verstehe was scale() macht.