diff --git a/animated-navigation/index.html b/animated-navigation/index.html
new file mode 100644
index 0000000..2801213
--- /dev/null
+++ b/animated-navigation/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Animated Navigation
+
+
+
+
+
+
+
+
diff --git a/animated-navigation/script.js b/animated-navigation/script.js
new file mode 100644
index 0000000..fd77c00
--- /dev/null
+++ b/animated-navigation/script.js
@@ -0,0 +1,4 @@
+const toggle = document.getElementById('toggle')
+const nav = document.getElementById('nav')
+
+toggle.addEventListener('click', () => nav.classList.toggle('active'))
diff --git a/animated-navigation/style.css b/animated-navigation/style.css
new file mode 100644
index 0000000..16674ea
--- /dev/null
+++ b/animated-navigation/style.css
@@ -0,0 +1,106 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #eafbff;
+ background-image: linear-gradient(
+ to bottom,
+ #eafbff 0%,
+ #eafbff 50%,
+ #5290f9 50%,
+ #5290f9 100%
+ );
+ font-family: 'Muli', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+}
+
+nav {
+ background-color: #fff;
+ padding: 20px;
+ width: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 3px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ transition: width 0.6s linear;
+}
+
+nav.active {
+ width: 350px;
+}
+
+nav ul {
+ display: flex;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ width: 0;
+ transition: width 0.6s linear;
+}
+
+nav.active ul {
+ width: 100%;
+}
+
+nav ul li {
+ transform: rotateY(0deg);
+ opacity: 0;
+ transition: transform 0.6s linear, opacity 0.6s linear;
+}
+
+nav.active ul li {
+ opacity: 1;
+ transform: rotateY(360deg);
+}
+
+nav ul a {
+ position: relative;
+ color: #000;
+ text-decoration: none;
+ margin: 0 10px;
+}
+
+.icon {
+ background-color: #fff;
+ border: 0;
+ cursor: pointer;
+ padding: 0;
+ position: relative;
+ height: 30px;
+ width: 30px;
+}
+
+.icon:focus {
+ outline: 0;
+}
+
+.icon .line {
+ background-color: #5290f9;
+ height: 2px;
+ width: 20px;
+ position: absolute;
+ top: 10px;
+ left: 5px;
+ transition: transform 0.6s linear;
+}
+
+.icon .line2 {
+ top: auto;
+ bottom: 10px;
+}
+
+nav.active .icon .line1 {
+ transform: rotate(-765deg) translateY(5.5px);
+}
+
+nav.active .icon .line2 {
+ transform: rotate(765deg) translateY(-5.5px);
+}