100-project-100-days-website/100_projects/7-animated-menu/style.css
2023-02-28 17:23:10 +03:00
Ask

105 lines
1.8 KiB
CSS

{01624698af84e06f2f4922b3b3c6c887dc17ba56 true 1798 style.css 0xc0084a12d0}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: linear-gradient(45deg, #008B8B, #FF8C00);
}
.navgation{
position: fixed;
top: 20px;
right: 20px;
height: 20px;
width: 250px;
z-index: 99;
}
.toggle{
position: relative;
top: 0;
left:0;
width: 250px;
height: 50px;
background: #fff;
cursor: pointer;
display: flex;
justify-content: flex-end;
align-items: center;
color: #ff216d;
padding: 10px 20px;
}
.toggle::before{
content: 'Menu';
margin-right: 10px;
}
.toggle.active::before{
content: 'Close';
}
.toggle span{
position: relative;
width: 20px;
height: 50px;
}
.toggle span::before{
content: '';
position: absolute;
top:20px;
left:0;
width: 100%;
height: 2px;
background: #ff216d;
transition: .5s;
}
.toggle span::after{
content: '';
position: absolute;
bottom:20px;
left:0;
width: 100%;
height: 2px;
background: #ff216d;
transition: .5s;
}
.toggle.active span::before{
transform: rotate(225deg);
top: 24px;
}
.toggle.active span::after{
transform: rotate(135deg);
bottom: 24px;
}
ul{
position: relative;
flex-direction: column;
}
ul li{
position: relative;
list-style: none;
transition: .5s;
visibility: hidden;
opacity: 0;
transform: translateX(-250px);
transition-delay: calc(0.1s * var(--i));
}
.navgation.active ul li{
visibility: visible;
opacity: 1;
transform: translateX(0);
}
ul li a{
position: relative;
text-decoration: none;
display: block;
padding: 10px 20px;
height: 50px;
background: #fff;
color: #333;
transition: .2s;
line-height: 30px;
}
ul li a:hover{
background: #f6f6f6;
color: #ff216d;
}