Mobile navigation

siwachs · Mar 13, 2024 · 19ad7a3 · 19ad7a3
1 parent f58d290
commit 19ad7a3
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 1 deletion.
diff --git a/Mobile Navigation with Sliding Effect Tab Switch/index.html b/Mobile Navigation with Sliding Effect Tab Switch/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mobile Navigation with Sliding Effect Tab Switch</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav class="nav">
+      <ul class="list">
+        <li class="item"><i class="fa-solid fa-house"></i></li>
+        <li class="item"><i class="fa-solid fa-user"></i></li>
+        <li class="item active"><i class="fa-solid fa-bag-shopping"></i></li>
+        <li class="item"><i class="fa-solid fa-images"></i></li>
+        <li class="item"><i class="fa-solid fa-gear"></i></li>
+      </ul>
+
+      <div class="effect">
+        <div class="circle"></div>
+      </div>
+    </nav>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Mobile Navigation with Sliding Effect Tab Switch/script.js b/Mobile Navigation with Sliding Effect Tab Switch/script.js
@@ -0,0 +1,18 @@
+const nav = document.querySelector(".nav");
+const items = document.querySelectorAll(".nav .list .item");
+
+items.forEach((item) => {
+  item.addEventListener("click", () => {
+    const currentActiveElement = document.querySelector(
+      ".nav .list .item.active"
+    );
+    if (currentActiveElement) currentActiveElement.classList.remove("active");
+    item.classList.add("active");
+    nav.style.setProperty("--position-x-active", item.offsetLeft + "px");
+  });
+});
+
+const activeTab = document.querySelector(".nav .list .item.active");
+if (activeTab) {
+  nav.style.setProperty("--position-x-active", activeTab.offsetLeft + "px");
+}
diff --git a/Mobile Navigation with Sliding Effect Tab Switch/styles.css b/Mobile Navigation with Sliding Effect Tab Switch/styles.css
@@ -0,0 +1,96 @@
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: url("http://i.gifer.com/2eRM.gif") center / cover;
+}
+
+nav {
+  color: #fff;
+  position: fixed;
+  inset: auto 0 0 0;
+  border-bottom: 20px solid #fff;
+  width: min(500px, 100%);
+  --w-h-item: 60px;
+  --position-x-active: 170px;
+}
+
+nav ul {
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(5, var(--w-h-item));
+  grid-template-rows: var(--w-h-item);
+  justify-content: space-between;
+}
+
+nav ul li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: 0.5s;
+  color: #000;
+}
+
+nav ul li.active {
+  transform: translateY(-10px);
+}
+
+nav .effect {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  height: calc(10px + var(--w-h-item));
+  background: #000;
+  z-index: -1;
+  overflow: hidden;
+}
+
+nav .effect::before {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: var(--w-h-item);
+  width: calc(var(--position-x-active) - 10px);
+  background-color: #fff;
+  content: "";
+  border-top-right-radius: 30px;
+  transition: 0.5s;
+}
+
+nav .effect::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: var(--w-h-item);
+  width: calc(100% - var(--position-x-active) - var(--w-h-item) - 10px);
+  background-color: #fff;
+  content: "";
+  border-top-left-radius: 30px;
+  transition: 0.5s;
+}
+
+nav .effect .circle {
+  position: absolute;
+  width: var(--w-h-item);
+  height: var(--w-h-item);
+  background: #fff;
+  left: var(--position-x-active);
+  border-radius: 50%;
+  box-shadow: 0 20px 20px #5555;
+  transition: 0.5s;
+}
+
+nav .effect .circle::before {
+  position: absolute;
+  left: -10px;
+  right: -10px;
+  content: "";
+  height: 100%;
+  background-color: transparent;
+  border-radius: 50%;
+  box-shadow: 0 50px 0 30px #fff;
+  bottom: -10px;
+  transition: 0.5s;
+}
diff --git a/Responsive Banner/index.html b/Responsive Banner/index.html
@@ -22,6 +22,5 @@
         </div>
       </div>
     </div>
-    <script src="./script.js"></script>
   </body>
 </html>
diff --git a/Responsive Banner/script.js b/Responsive Banner/script.js
diff --git a/index.html b/index.html
@@ -31,8 +31,14 @@ <h3>Carousel and Sliders</h3>
       <a href="./Animated Slider For Starbucks Coffee/"
         >Animated Slider For Starbucks Coffee</a
       >
+
       <h3>Banners</h3>
       <a href="./Responsive Banner/index.html">Responsive Banner</a>
+
+      <h3>Navigations</h3>
+      <a href="./Mobile Navigation with Sliding Effect Tab Switch/index.html"
+        >Mobile Navigation with Sliding Effect Tab Switch</a
+      >
     </section>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,5 @@ @@
             </div>
           </div>
         </div>
-        <script src="./script.js"></script>
       </body>
     </html>