Menü Slide in from Bottom
Menü, das von unten reingeslidet kommt
Der hier verwendete 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>