Cyberpunk_Hamburger_Menu_Photography
一个简单、响应迅速的赛博朋克主题汉堡菜单,用于摄影作品集,具有深色背景、明亮的三重色强调色,营造出霓虹灯美感,并完全支持深色模式。
HTML 代码
<header class="bg-black text-gray-200 dark:bg-gray-950 p-4 shadow-lg shadow-fuchsia-800/30 relative z-50">
<nav class="container mx-auto flex items-center justify-between">
<a href="#" class="text-2xl font-bold text-teal-400 font-mono tracking-wider hover:text-cyan-300 dark:text-teal-500 dark:hover:text-cyan-400 transition duration-300">
GLITCH_PIXELS
</a>
<!-- Desktop Navigation -->
<div class="hidden md:flex space-x-8">
<a href="#gallery" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
Gallery
</a>
<a href="#portfolio" class="text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-teal-400 dark:text-teal-500 dark:hover:text-teal-400 dark:hover:border-teal-500">
Portfolio
</a>
<a href="#about" class="text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-orange-400 dark:text-yellow-400 dark:hover:text-yellow-300 dark:hover:border-yellow-400">
About
</a>
<a href="#contact" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
Contact
</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden">
<button id="mobile-menu-button" class="text-fuchsia-400 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-fuchsia-600 dark:text-purple-400 dark:focus:ring-purple-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</nav>
<!-- Mobile Menu (Hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-black dark:bg-gray-950 border-t-2 border-fuchsia-800 dark:border-purple-800 shadow-lg shadow-fuchsia-800/30">
<div class="flex flex-col p-4 space-y-4">
<a href="#gallery" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-fuchsia-800/50 dark:text-purple-400 dark:hover:text-purple-300 dark:border-purple-800/50">
Gallery
</a>
<a href="#portfolio" class="block text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-teal-800/50 dark:text-teal-500 dark:hover:text-teal-400 dark:border-teal-800/50">
Portfolio
</a>
<a href="#about" class="block text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-orange-800/50 dark:text-yellow-400 dark:hover:text-yellow-300 dark:border-yellow-800/50">
About
</a>
<a href="#contact" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 dark:text-purple-400 dark:hover:text-purple-300">
Contact
</a>
</div>
</div>
</header>
<!-- Simple JavaScript to toggle the mobile menu -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const button = document.getElementById('mobile-menu-button');
const menu = document.getElementById('mobile-menu');
button.addEventListener('click', function () {
menu.classList.toggle('hidden');
});
// Close menu when a link is clicked (optional)
const menuLinks = menu.querySelectorAll('a');
menuLinks.forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
});
});
});
</script>