欢迎使用 WordPress。这是您的第一篇文章。编辑或删除它，然后开始写作吧！
博客
FIREFLY LUX
向下滚动页面，观察导航栏背景与阴影的变化…
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>零件 1：页头导航栏</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
/* 丝滑过渡动画，防止切换时闪烁 */
*, *::before, *::after {
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
</style>
</head>
<body class="bg-[#fcfbf9] min-h-[150vh]"> <header id="main-header" class="w-full border-b border-black/10 bg-white/90 sticky top-0 z-50 transition-all duration-500">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="font-bold text-xl tracking-widest text-[#4A5D4E]">FIREFLY LUX</div>
</div>
<nav class="hidden md:flex space-x-8 text-xs uppercase tracking-widest font-medium">
<a href="#home" class="hover:opacity-50">Home</a>
<a href="#about-us" class="hover:opacity-50">About Us</a>
<a href="#contact-us" class="hover:opacity-50">Contact Us</a>
</nav>
<div class="relative group py-2 hidden md:block">
<button class="text-xs uppercase tracking-widest flex items-center space-x-1 cursor-pointer font-medium">
<span>Language: <strong id="current-lang" class="font-bold">English</strong></span>
<span class="text-[8px] opacity-60">▼</span>
</button>
<div class="absolute right-0 mt-2 w-36 bg-white border border-neutral-200 rounded shadow-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 z-50">
<ul class="py-1 text-[10px] uppercase tracking-wider text-neutral-700">
<li><a href="#" class="block px-4 py-2 hover:bg-[#fcfbf9] hover:text-[#4A5D4E]" onclick="changeLang('English')">English</a></li>
<li><a href="#" class="block px-4 py-2 hover:bg-[#fcfbf9] hover:text-[#4A5D4E]" onclick="changeLang('中文')">中文</a></li>
<li><a href="#" class="block px-4 py-2 hover:bg-[#fcfbf9] hover:text-[#4A5D4E]" onclick="changeLang('日本語')">日本語</a></li>
<li><a href="#" class="block px-4 py-2 hover:bg-[#fcfbf9] hover:text-[#4A5D4E]" onclick="changeLang('ไทย')">ไทย</a></li>
<li><a href="#" class="block px-4 py-2 hover:bg-[#fcfbf9] hover:text-[#4A5D4E]" onclick="changeLang('Tiếng Việt')">Tiếng Việt</a></li>
<li><a href="#" class="block px-4 py-2 hover:bg-[#fcfbf9] hover:text-[#4A5D4E]" onclick="changeLang('Español')">Español</a></li>
</ul>
</div>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-btn" class="text-black focus:outline-none cursor-pointer">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-neutral-100 px-6 py-4 space-y-4 text-xs uppercase tracking-widest">
<a href="#home" class="block py-2 border-b border-neutral-50" onclick="closeMobileMenu()">Home</a>
<a href="#about-us" class="block py-2 border-b border-neutral-50" onclick="closeMobileMenu()">About Us</a>
<a href="#contact-us" class="block py-2 border-b border-neutral-50" onclick="closeMobileMenu()">Contact Us</a>
<div class="pt-2">
<span class="text-neutral-400 block mb-2 text-[10px]">Select Language:</span>
<div class="grid grid-cols-2 gap-2 text-[10px]">
<button class="text-left py-1 hover:text-[#4A5D4E]" onclick="changeLang('English'); closeMobileMenu()">English</button>
<button class="text-left py-1 hover:text-[#4A5D4E]" onclick="changeLang('中文'); closeMobileMenu()">中文</button>
<button class="text-left py-1 hover:text-[#4A5D4E]" onclick="changeLang('日本語'); closeMobileMenu()">日本語</button>
<button class="text-left py-1 hover:text-[#4A5D4E]" onclick="changeLang('ไทย'); closeMobileMenu()">ไทย</button>
<button class="text-left py-1 hover:text-[#4A5D4E]" onclick="changeLang('Tiếng Việt'); closeMobileMenu()">Tiếng Việt</button>
<button class="text-left py-1 hover:text-[#4A5D4E]" onclick="changeLang('Español'); closeMobileMenu()">Español</button>
</div>
</div>
</div>
</header>
<div class="max-w-7xl mx-auto p-6 mt-12 text-sm text-neutral-400">
向下滚动页面，观察导航栏背景与阴影的变化...
</div>
<script>
// 1. 切换选中的语言
function changeLang(lang) {
document.getElementById('current-lang').innerText = lang;
// 后期你可以在这里加入实际的多语言翻译逻辑
}
// 2. 手机端汉堡菜单展开/收起
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
function closeMobileMenu() {
mobileMenu.classList.add('hidden');
}
// 3. 滚动页面时，导航栏变毛玻璃半透明并变窄
window.addEventListener('scroll', () => {
const header = document.getElementById('main-header');
if (window.scrollY > 50) {
header.classList.remove('py-4', 'bg-white/90');
header.classList.add('py-2', 'bg-white/70', 'shadow-sm', 'backdrop-blur-md');
} else {
header.classList.remove('py-2', 'bg-white/70', 'shadow-sm', 'backdrop-blur-md');
header.classList.add('py-4', 'bg-white/90');
}
});
</script>
</body>
</html>
