x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-02-28 17:23:10 +03:00 committed by GitHub
parent fc208330e8
commit e619e75eda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 136 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
100_projects/7-animated-menu/app.js Normal file
View File

@ -0,0 +1,5 @@
let navgation = document.querySelector('.navgation');
document.querySelector('.toggle').onclick = function (){
this.classList.toggle('active');
navgation.classList.toggle('active');
}

26
100_projects/7-animated-menu/index.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<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="style.css">
</head>
<body>
<div class="navgation">
<div class="toggle"><span></span></div>
<ul>
<li style="--i:0;"><a href="#">Home</a></li>
<li style="--i:1;"><a href="#">About</a></li>
<li style="--i:2;"><a href="#">Shop</a></li>
<li style="--i:3;"><a href="#">Story</a></li>
<li style="--i:4;"><a href="#">Blog</a></li>
<li style="--i:5;"><a href="#">Contacts</a></li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

105
100_projects/7-animated-menu/style.css Normal file
View File

@ -0,0 +1,105 @@
*{
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;
}