Ja im plus bereich schaut es etwas anders aus warum auch immer aber so passt es für meinen geschmack.
Beiträge von MitchX
-
-
Alles anzeigen
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
Habe nun mit deiner Variante etwas gespielt und habe den effect den ich mit 2 label hate nun mit einem hinbekommen ich danke dir.
-
Alles anzeigen
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
Die lösung gefällt mir besser ich danke dir
-
Danke habe es nun so gemacht
-
Habe nun eine Lösung gefunden.
Habe ein 2tes Label eingetragen & den checkbox Button in der css neu bearbeitet.
HTML
Alles anzeigenHTML <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="base/css/base.css"> </head> <body> <!--Header--> <header> <a id="title" href="#">Pagename</a> <input id="nav_check" type="checkbox"> <label class="nav_btn nav_btn_off" for="nav_check"></label> <label class="nav_btn nav_btn_on" for="nav_check"></label> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> </body> </html> CSS /* Globale CSS Resets ==================================================*/ *{ margin: 0; padding: 0; box-sizing: border-box; font-size: 100%; } /* HTML & Body ==================================================*/ html{scroll-behavior: smooth;} body{ height: 100vh; background: #dddddd; } /* Header ==================================================*/ header{ position: fixed; top: 0; width: 100%; height: 60px; background: #000000; font-size: 150%; } /* Header Title --------------------------------------------------*/ header #title{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: auto; height: 60px; padding: 0 10px 0 10px; color: #ffffff; text-decoration: none; } /* Header Checkbox Button --------------------------------------------------*/ header #nav_check{display: none;} header .nav_btn{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; width: auto; height: 60px; padding: 0 10px 0 10px; color: #ffffff; cursor: pointer; transition: all 0.8s ease-in-out; } header .nav_btn_off::before{content: 'MENU';} header #nav_check:checked ~ .nav_btn_off{opacity: 0;transform: scale(-2)} header .nav_btn_on::before{content: 'CLOSE';} header #nav_check ~ .nav_btn_on{opacity: 0;} header #nav_check:checked ~ .nav_btn_on{opacity: 1;} /* Header Navigations --------------------------------------------------*/ header nav{ position: fixed; top:100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #3a3534; transition: all 0.8s ease-in-out; z-index: 1000; } header nav ul li{ list-style: none; text-align: center; padding: 10px; } header nav ul li a{ color: #ffffff; font-size: 220%; text-decoration: none; } header #nav_check:checked ~ nav{ top: 60px; bottom: 0; transition: all 0.8s ease-in-out; }
Document -
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?
-
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
Code
Alles anzeigen==================================================== HTML CODE ==================================================== <header> <a id="title" href="#">Pagename</a> <input id="nav_check" type="checkbox"> <label id="nav_btn" for="nav_check"></label> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> ==================================================== CSS CODE ==================================================== /* Globale CSS Resets ==================================================*/ *{ margin: 0; padding: 0; box-sizing: border-box; font-size: 100%; } /* HTML & Body ==================================================*/ html{scroll-behavior: smooth;} body{ height: 100vh; background: #dddddd; } /* Header ==================================================*/ header{ position: fixed; top: 0; width: 100%; height: 60px; background: #000000; font-size: 150%; } /* Header Title --------------------------------------------------*/ header #title{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: auto; height: 60px; padding: 0 10px 0 10px; color: #ffffff; text-decoration: none; } /* Header Checkbox Button --------------------------------------------------*/ header #nav_check{display: none;} header #nav_btn{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; width: auto; height: 60px; padding: 0 10px 0 10px; color: #ffffff; cursor: pointer; } header #nav_btn::before{content: 'MENU';} header #nav_check:checked ~ #nav_btn::before{content: 'CLOSE';} /* Header Navigations --------------------------------------------------*/ header nav{ position: fixed; top:100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #3a3534; transition: all 0.8s ease-in-out; z-index: 1000; } header nav ul li{ list-style: none; text-align: center; padding: 10px; } header nav ul li a{ color: #ffffff; font-size: 220%; text-decoration: none; } header #nav_check:checked ~ nav{ top: 60px; bottom: 0; transition: all 0.8s ease-in-out; }
