From 9f7e24a462b763fe90077c661aa7c1612ace8c10 Mon Sep 17 00:00:00 2001 From: Sam <74021826+x39OME@users.noreply.github.com> Date: Sun, 19 Mar 2023 17:23:21 +0300 Subject: [PATCH] Add files via upload --- .../css/style.css | 91 +++++++++++++++++++ .../index.html | 52 +++++++++++ .../js/main.js | 8 ++ 3 files changed, 151 insertions(+) create mode 100644 100_projects/26-magic-navigation-menu-indicator/css/style.css create mode 100644 100_projects/26-magic-navigation-menu-indicator/index.html create mode 100644 100_projects/26-magic-navigation-menu-indicator/js/main.js diff --git a/100_projects/26-magic-navigation-menu-indicator/css/style.css b/100_projects/26-magic-navigation-menu-indicator/css/style.css new file mode 100644 index 0000000..236858e --- /dev/null +++ b/100_projects/26-magic-navigation-menu-indicator/css/style.css @@ -0,0 +1,91 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: linear-gradient(#ff2871,rgba(255,40, 113, .2)); +} +.navigation{ + width: 350px; + height: 70px; + background: #fff; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; +} +.navigation ul{ + display: flex; + width: 350px; +} +.navigation ul li{ + position: relative; + list-style: none; + width: 70px; + height: 70px; + z-index: 1; +} +.navigation ul li a{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + text-align: center; +} +.navigation ul li a .icon{ + position: relative; + display: block; + line-height: 75px; + font-size: 21px; + text-align: center; + transition: .3s; + color: #ff2871; +} +.navigation ul li.active a .icon{ + transform: translateY(-32px); +} +.navigation ul li a .text{ + position: absolute; + color: #ff2871; + font-weight: 400; + font-size: 17px; + transition: .3s; + opacity: 0; + transform: translateY(20px); +} +.navigation ul li.active a .text{ + opacity: 1; + transform: translateY(10px); +} +.point{ + position: absolute; + top:38%; + width: 70px; + height: 70px; + background: #fff; + border-radius: 50%; + border: 5px solid #ff2871; + transition: .5s; +} +.navigation ul li:nth-child(1).active ~ .point{ + transform: translateX(calc(70px * 0)); +} +.navigation ul li:nth-child(2).active ~ .point{ + transform: translateX(calc(70px * 1)); +} +.navigation ul li:nth-child(3).active ~ .point{ + transform: translateX(calc(70px * 2)); +} +.navigation ul li:nth-child(4).active ~ .point{ + transform: translateX(calc(70px * 3)); +} +.navigation ul li:nth-child(5).active ~ .point{ + transform: translateX(calc(70px * 4)); +} diff --git a/100_projects/26-magic-navigation-menu-indicator/index.html b/100_projects/26-magic-navigation-menu-indicator/index.html new file mode 100644 index 0000000..99d426c --- /dev/null +++ b/100_projects/26-magic-navigation-menu-indicator/index.html @@ -0,0 +1,52 @@ + + + + + + + + + Document + + +
+ +
+ + + + + \ No newline at end of file diff --git a/100_projects/26-magic-navigation-menu-indicator/js/main.js b/100_projects/26-magic-navigation-menu-indicator/js/main.js new file mode 100644 index 0000000..fac5530 --- /dev/null +++ b/100_projects/26-magic-navigation-menu-indicator/js/main.js @@ -0,0 +1,8 @@ +const list = document.querySelectorAll('.list'); +function activeClick(){ + list.forEach((itme) => + itme.classList.remove("active")); + this.classList.add("active"); +} + list.forEach((item) => + item.addEventListener('click', activeClick));