Pseudoelemente ::before Content Animation?

MitchX · 23. Oktober 2021

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

====================================================
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;
}

Alles anzeigen

tk1234 · 23. Oktober 2021

Zitat von MitchX

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.

MitchX · 23. Oktober 2021

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 · 23. Oktober 2021

Zitat von MitchX

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

Versuch mal das Menü nur mit Hilfe der Tastatur zu öffnen - das geht nicht.

Sempervivum · 23. Oktober 2021

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.

MitchX · 23. Oktober 2021

Habe nun eine Lösung gefunden.

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

HTML

HTML

<!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;
}

Alles anzeigen

Document

Pagename

basti1012 · 23. Oktober 2021

Ich weiß nicht, was du da genau machen möchtest, aber before:: kann man auch animieren

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

MitchX · 23. Oktober 2021

Danke habe es nun so gemacht

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

basti1012 · 23. Oktober 2021

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

MitchX · 23. Oktober 2021

Zitat von basti1012

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://codepen.io/basti1012/pen/abypBGj

Alles anzeigen

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

MitchX · 23. Oktober 2021

Zitat von basti1012

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://codepen.io/basti1012/pen/abypBGj

Alles anzeigen

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

basti1012 · 23. Oktober 2021

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.

MitchX · 23. Oktober 2021

Ja im plus bereich schaut es etwas anders aus warum auch immer aber so passt es für meinen geschmack.

Pseudoelemente ::before Content Animation?

Jetzt mitmachen!

Teilen