lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
165 lines (141 loc) • 8.43 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Nav UI</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.dynamicNav-nav-bg {
background-color: #000000;
width: 100%;
/* Ensure full-width */
position: relative;
/* Fix positioning context */
}
.dynamicNav-highlight-glow {
box-shadow: inset 0 0 10px #fff;
}
.dynamicNav-nav-link {
color: #ffffff;
transition: color 0.3s ease, transform 0.3s ease;
}
.dynamicNav-nav-link:hover {
transform: scale(1.1);
}
.dynamicNav-highlight-transition {
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.dynamicNav-active-link {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-white text-white min-h-screen flex items-center justify-center ">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl ">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4">
<main class="w-full max-w-xl">
<!-- Navigation -->
<nav
class="relative bg-black border border-gray-700 rounded-full shadow-lg backdrop-blur-md dynamicNav-nav-bg px-2">
<!-- Background highlight -->
<div id="highlight"
class="absolute top-0 left-0 h-full bg-black rounded-full dynamicNav-highlight-glow dynamicNav-highlight-transition cursor-pointer z-0 transition-all duration-300">
</div>
<ul class="flex justify-between items-center gap-4 py-2 relative z-10">
<!-- Navigation Links -->
<li class="flex-1 rounded-full">
<a href="javascript:void(0)" id="home"
class="flex gap-2 items-center justify-center h-8 md:h-12 text-sm md:text-lg rounded-full font-medium dynamicNav-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class=" size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span class="hidden sm:flex">
Home
</span>
</a>
</li>
<li class="flex-1 rounded-full">
<a href="javascript:void(0)" id="shop"
class="flex gap-2 items-center justify-center h-8 md:h-12 text-sm md:text-lg rounded-full font-medium dynamicNav-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />
</svg>
<span class="hidden sm:flex">
Shop
</span>
</a>
</li>
<li class="flex-1 rounded-full">
<a href="javascript:void(0)" id="about"
class="flex gap-2 items-center justify-center h-8 md:h-12 text-sm md:text-lg rounded-full font-medium dynamicNav-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
<span class="hidden sm:flex">
About
</span>
</a>
</li>
<li class="flex-1 rounded-full">
<a href="javascript:void(0)" id="contact"
class="flex gap-2 items-center justify-center h-8 md:h-12 text-sm md:text-lg rounded-full font-medium dynamicNav-nav-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
</svg>
<span class="hidden sm:flex">
Contact
</span>
</a>
</li>
</ul>
</nav>
</main>
</div>
</div>
<script>
const nav = document.querySelector("nav");
const links = document.querySelectorAll("nav ul li a");
const highlight = document.getElementById("highlight");
function handleHover(event) {
const link = event.currentTarget.parentNode;
const { left, width } = link.getBoundingClientRect();
const navRect = nav.getBoundingClientRect();
// Move highlight
highlight.style.transform = `translateX(${left - navRect.left}px)`;
highlight.style.width = `${width}px`;
// Reset all links' color
links.forEach(link => link.classList.remove("dynamicNav-highlighted"));
// Change the hovered link text to black
event.currentTarget.classList.add("dynamicNav-highlighted");
}
function handleClick(event) {
event.preventDefault();
links.forEach(link => link.parentNode.classList.remove("dynamicNav-active-link"));
event.currentTarget.parentNode.classList.add("dynamicNav-active-link");
}
links.forEach(link => {
link.addEventListener("mousemove", handleHover);
link.addEventListener("click", handleClick);
});
// Set initial position
window.addEventListener("DOMContentLoaded", () => {
const { left, width } = links[0].parentNode.getBoundingClientRect();
const navRect = nav.getBoundingClientRect();
highlight.style.transform = `translateX(${left - navRect.left}px)`;
highlight.style.width = `${width}px`;
// Highlight the first link initially
links[0].classList.add("dynamicNav-highlighted");
});
</script>
</body>
</html>