From f00792c696668d6eb8820bac4de728c053a27ff6 Mon Sep 17 00:00:00 2001 From: Moez <65367982+moezmustafa@users.noreply.github.com> Date: Mon, 23 Oct 2023 20:45:51 +0500 Subject: [PATCH 1/3] Animated NavBar --- NavBar Animated/index.html | 28 +++++++++++++++++ NavBar Animated/script.js | 32 ++++++++++++++++++++ NavBar Animated/style.css | 62 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 122 insertions(+) create mode 100644 NavBar Animated/index.html create mode 100644 NavBar Animated/script.js create mode 100644 NavBar Animated/style.css diff --git a/NavBar Animated/index.html b/NavBar Animated/index.html new file mode 100644 index 000000000..b94ee0bf6 --- /dev/null +++ b/NavBar Animated/index.html @@ -0,0 +1,28 @@ + + + + + + + Document + + +
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/NavBar Animated/script.js b/NavBar Animated/script.js new file mode 100644 index 000000000..592385306 --- /dev/null +++ b/NavBar Animated/script.js @@ -0,0 +1,32 @@ +const menuItems = document.querySelectorAll('.tab-button'); +const indicator = document.querySelector('.indicator'); + +let activeItemIndex = 0; + +function updateIndicator(index) { + const activeItem = menuItems[index]; + const container = document.querySelector('.tab-container'); + const containerRect = container.getBoundingClientRect(); + const activeItemRect = activeItem.getBoundingClientRect(); + + const indicatorLeft = Math.floor( + activeItemRect.left - containerRect.left - + (indicator.offsetWidth - activeItemRect.width) / 2 + ); + + indicator.style.transform = `translateX(${indicatorLeft}px)`; +} + +menuItems.forEach((item, index) => { + item.addEventListener('click', () => { + if (activeItemIndex !== index) { + menuItems[activeItemIndex].classList.remove('active'); + item.classList.add('active'); + activeItemIndex = index; + updateIndicator(index); + } + }); +}); + +// Initialize with the first active item +updateIndicator(activeItemIndex); diff --git a/NavBar Animated/style.css b/NavBar Animated/style.css new file mode 100644 index 000000000..6c02187ff --- /dev/null +++ b/NavBar Animated/style.css @@ -0,0 +1,62 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #C3F2FF; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + } + .tab-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; + background-color: #032146; + color: #fff; + border-radius: 0 0 20px 20px; + overflow: hidden; + width: 28em; + height: 8em; + padding: 0 0.85em 0.5em; + } + .tab-button { + all: unset; + flex-grow: 1; + padding: .5em; + border: none; + background: none; + color: inherit; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + position: relative; + z-index: 10; + transition: transform 0.5s ease-in-out; + } + .tab-button:after { + content: attr(data-text); + font-size: .9em; + pointer-events: none; + transition: opacity .3s ease-in-out; + opacity: 0; + } + .tab-button.active::after { + opacity: 1; + padding-left: 0.5em; + pointer-events: all; + } + + .indicator { + position: absolute; + width: 6.5em; + height: 3.5em; + left: 0; + background-color: rgba(255, 255, 255, 0.1); + color: #fff; + transform: translateX(0); + transition: transform 0.5s; + border-radius: 12px; + } \ No newline at end of file From ad196d9b907ca4cf0e4011ab779dfc9e7a97e140 Mon Sep 17 00:00:00 2001 From: Moez <65367982+moezmustafa@users.noreply.github.com> Date: Mon, 23 Oct 2023 21:13:27 +0500 Subject: [PATCH 2/3] updated the file structure --- {NavBar Animated => moezmustafa:NavBarAnimated}/index.html | 0 {NavBar Animated => moezmustafa:NavBarAnimated}/script.js | 0 {NavBar Animated => moezmustafa:NavBarAnimated}/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename {NavBar Animated => moezmustafa:NavBarAnimated}/index.html (100%) rename {NavBar Animated => moezmustafa:NavBarAnimated}/script.js (100%) rename {NavBar Animated => moezmustafa:NavBarAnimated}/style.css (100%) diff --git a/NavBar Animated/index.html b/moezmustafa:NavBarAnimated/index.html similarity index 100% rename from NavBar Animated/index.html rename to moezmustafa:NavBarAnimated/index.html diff --git a/NavBar Animated/script.js b/moezmustafa:NavBarAnimated/script.js similarity index 100% rename from NavBar Animated/script.js rename to moezmustafa:NavBarAnimated/script.js diff --git a/NavBar Animated/style.css b/moezmustafa:NavBarAnimated/style.css similarity index 100% rename from NavBar Animated/style.css rename to moezmustafa:NavBarAnimated/style.css From 0c7901b377b0ec48129c38d71387f13c149df984 Mon Sep 17 00:00:00 2001 From: Moez <65367982+moezmustafa@users.noreply.github.com> Date: Mon, 23 Oct 2023 21:35:05 +0500 Subject: [PATCH 3/3] updated file structure --- .../moezmustafa}/index.html | 0 .../moezmustafa}/script.js | 0 .../moezmustafa}/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename {moezmustafa:NavBarAnimated => NavBarAnimated/moezmustafa}/index.html (100%) rename {moezmustafa:NavBarAnimated => NavBarAnimated/moezmustafa}/script.js (100%) rename {moezmustafa:NavBarAnimated => NavBarAnimated/moezmustafa}/style.css (100%) diff --git a/moezmustafa:NavBarAnimated/index.html b/NavBarAnimated/moezmustafa/index.html similarity index 100% rename from moezmustafa:NavBarAnimated/index.html rename to NavBarAnimated/moezmustafa/index.html diff --git a/moezmustafa:NavBarAnimated/script.js b/NavBarAnimated/moezmustafa/script.js similarity index 100% rename from moezmustafa:NavBarAnimated/script.js rename to NavBarAnimated/moezmustafa/script.js diff --git a/moezmustafa:NavBarAnimated/style.css b/NavBarAnimated/moezmustafa/style.css similarity index 100% rename from moezmustafa:NavBarAnimated/style.css rename to NavBarAnimated/moezmustafa/style.css