From bec1c4a75a17d14845a64ddafd6f84774e669231 Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Tue, 1 Mar 2022 23:28:58 +0530 Subject: [PATCH] day 14 completed --- my code/14-animated-navigation/index.html | 30 +++++++ my code/14-animated-navigation/script.js | 6 ++ my code/14-animated-navigation/style.css | 97 +++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 my code/14-animated-navigation/index.html create mode 100644 my code/14-animated-navigation/script.js create mode 100644 my code/14-animated-navigation/style.css diff --git a/my code/14-animated-navigation/index.html b/my code/14-animated-navigation/index.html new file mode 100644 index 0000000..c62453f --- /dev/null +++ b/my code/14-animated-navigation/index.html @@ -0,0 +1,30 @@ + + + + + + + + 14 animated naviagtion + + + + + + + + + + \ No newline at end of file diff --git a/my code/14-animated-navigation/script.js b/my code/14-animated-navigation/script.js new file mode 100644 index 0000000..e1f712f --- /dev/null +++ b/my code/14-animated-navigation/script.js @@ -0,0 +1,6 @@ +const btn = document.getElementById("toggle"); +const nav = document.getElementById("nav"); + +btn.addEventListener("click", () => { + nav.classList.toggle("active"); +}); diff --git a/my code/14-animated-navigation/style.css b/my code/14-animated-navigation/style.css new file mode 100644 index 0000000..ba5fce5 --- /dev/null +++ b/my code/14-animated-navigation/style.css @@ -0,0 +1,97 @@ +* { + margin: 0; + padding: 0; +} +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient( + to bottom, + #eafbff 0%, + #eafbff 50%, + #5290f9 50%, + #5290f9 100% + ); +} + +nav { + width: 80px; + background-color: #fff; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + font-family: sans-serif; + font-size: 20px; + 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; + margin: 0 10px; + transition: transform 0.6s linear, opacity 0.6s linear; +} + +nav.active ul li { + opacity: 1; + transform: rotateY(360deg); +} + +.icon { + background-color: #fff; + border: unset; + cursor: pointer; + padding: 0; + position: relative; + height: 30px; + width: 30px; +} + +.icon:focus { + outline: none; +} + +.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); +}