From e619e75eda9b0fe77bba4acf0fe6ad0c60a48dff Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Tue, 28 Feb 2023 17:23:10 +0300
Subject: [PATCH] Add files via upload
---
100_projects/7-animated-menu/app.js | 5 ++
100_projects/7-animated-menu/index.html | 26 ++++++
100_projects/7-animated-menu/style.css | 105 ++++++++++++++++++++++++
3 files changed, 136 insertions(+)
create mode 100644 100_projects/7-animated-menu/app.js
create mode 100644 100_projects/7-animated-menu/index.html
create mode 100644 100_projects/7-animated-menu/style.css
diff --git a/100_projects/7-animated-menu/app.js b/100_projects/7-animated-menu/app.js
new file mode 100644
index 0000000..301240b
--- /dev/null
+++ b/100_projects/7-animated-menu/app.js
@@ -0,0 +1,5 @@
+let navgation = document.querySelector('.navgation');
+document.querySelector('.toggle').onclick = function (){
+ this.classList.toggle('active');
+ navgation.classList.toggle('active');
+}
\ No newline at end of file
diff --git a/100_projects/7-animated-menu/index.html b/100_projects/7-animated-menu/index.html
new file mode 100644
index 0000000..df98895
--- /dev/null
+++ b/100_projects/7-animated-menu/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/7-animated-menu/style.css b/100_projects/7-animated-menu/style.css
new file mode 100644
index 0000000..0162469
--- /dev/null
+++ b/100_projects/7-animated-menu/style.css
@@ -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;
+}
\ No newline at end of file