Archiv-Modus von Basti1012 Lösungspage

Menü, das von unten reingeslidet kommt
Code

                                    
                                <style>
  
  *{
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}
body{
    height: 200vh;
    background: #dddddd;
}
h1{
    font-size: 200px;
    writing-mode: vertical-lr;
    text-align: center;
}
main{
 display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: flex-end;
    justify-content: center;
  padding:100px 0;
}
header{
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 60px;
    background: #000000;
    font-size: 150%;
    display:flex;
}

header #nav_check{
  display: none;
}


#title,#nav_btn{
    flex:1;
    padding: 16px 10px;
    display:flex;
    color: #ffffff;
    text-decoration: none;
  
}
#nav_btn {
    display: flex;
    justify-content: flex-end;
    cursor:pointer;
}



#nav_btn::before{
  content: 'MENU';
  color:white;
  animation:out linear 300ms 1;
}

header #nav_check:checked ~ #nav_btn::before{
  content: 'CLOSE';
  color:red;
  animation:in linear forwards 300ms 1;
}


@keyframes in{
  0%{
    transform:scale(1); 
    opacity:1;
  }
  50%{
     transform:scale(0);
     opacity:0.5;
  }
  70%{
     transform:scale(2);
     opacity:0;
  }
  100%{
     transform:scale(1);
     opacity:1;
  }
}
@keyframes out{
  0%{
    transform:scale(1); 
    opacity:1;
  }
  50%{
     transform:scale(0);
       opacity:0.5;
  }
  70%{
     transform:scale(2);
       opacity:0;
  }
  100%{
     transform:scale(1);
      opacity:1;
  }
}


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; 

    transition: all 0.8s ease-in-out;
}
</style>
<body>
    <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>
<main>
  <h1>INHALT</h1>
      </main>
</body>
basti1012.bplaced.net

Menü Slide in from Bottom

Code
