Cyberpunk Mega Menu
A complex, cyberpunk-themed mega menu for food/restaurant websites, featuring neon accents, dark backgrounds, full responsiveness, and dark mode support.
HTML Code
<nav class="bg-zinc-950 text-white shadow-lg dark:bg-black relative font-mono">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<a href="#" class="text-3xl font-bold tracking-widest text-lime-400 hover:text-lime-300 transition duration-300">CYBERBYTE</a>
<div class="hidden lg:flex items-center space-x-8">
<a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Home</a>
<div class="group relative">
<button class="text-lg uppercase hover:text-lime-400 transition duration-300 focus:outline-none border-b-2 border-transparent hover:border-lime-400 pb-1 flex items-center">
Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div class="absolute hidden group-hover:block w-fit min-w-[700px] right-0 mt-3 p-6 bg-zinc-900 border border-lime-400 shadow-xl rounded-md transition duration-300 opacity-0 group-hover:opacity-100 dark:bg-zinc-950">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h3 class="text-xl font-semibold mb-3 text-electric-blue-400 border-b border-lime-400 pb-2">Categories</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh (Main Courses)</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks (Appetizers)</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub (Vegan)</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks (Beverages)</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets (Desserts)</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs (Combos)</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-hot-pink-400 border-b border-lime-400 pb-2">Featured Items</h3>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/60/60?random=1" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-lime-400">
<div>
<p class="font-medium text-gray-200">Quantum Burger</p>
<p class="text-sm text-gray-400">Synth-meat, bio-cheese, hyper-sauce.</p>
<span class="text-lime-400 font-bold">$15.99</span>
</div>
</div>
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/60/60?random=2" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-electric-blue-400">
<div>
<p class="font-medium text-gray-200">Neon Noodles</p>
<p class="text-sm text-gray-400">Glowing pasta, cyber-shrimp.</p>
<span class="text-lime-400 font-bold">$18.50</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-lime-400 border-b border-lime-400 pb-2">Order Now!</h3>
<div class="relative overflow-hidden w-full h-40 rounded-lg">
<img src="https://picsum.photos/400/200?random=3" alt="Order Call to Action" class="w-full h-full object-cover transform scale-105 hover:scale-100 transition-transform duration-500 rounded-lg border-2 border-hot-pink-400">
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent flex items-end p-4">
<a href="#" class="text-hot-pink-400 text-lg font-bold hover:underline">Explore Full Menu <span class="text-white ml-1">→</span></a>
</div>
</div>
<p class="mt-3 text-sm text-gray-400">Deliveries to sectors Alpha, Beta, Gamma.</p>
<button class="mt-4 w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-2 px-4 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
Place Order
</button>
</div>
</div>
</div>
</div>
<a href="#" class="text-lg uppercase hover:text-electric-blue-400 transition duration-300 border-b-2 border-transparent hover:border-electric-blue-400 pb-1">Locations</a>
<a href="#" class="text-lg uppercase hover:text-hot-pink-400 transition duration-300 border-b-2 border-transparent hover:border-hot-pink-400 pb-1">About Us</a>
<a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Contact</a>
</div>
<div class="hidden lg:flex items-center space-x-4">
<div class="relative group">
<button class="flex items-center space-x-2 text-white hover:text-lime-400 transition duration-300 focus:outline-none">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-9 h-9 rounded-full object-cover border-2 border-lime-400">
<span class="text-lg">User 1</span>
</button>
<ul class="absolute hidden group-hover:block right-0 mt-3 w-48 bg-zinc-900 border border-lime-400 dark:bg-zinc-950 shadow-lg rounded-md overflow-hidden z-10">
<li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Profile</a></li>
<li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Order History</a></li>
<li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Settings</a></li>
<li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Logout</a></li>
</ul>
</div>
<button aria-label="Toggle dark mode" class="p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
</button>
</div>
<div class="lg:hidden flex items-center">
<button aria-label="Toggle dark mode" class="mr-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
</button>
<button id="mobile-menu-button" class="text-white hover:text-lime-400 focus:outline-none p-2 rounded-md bg-zinc-800 hover:bg-zinc-700 transition duration-300 dark:bg-zinc-900 dark:hover:bg-zinc-800">
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden lg:hidden flex-col bg-zinc-950 p-6 space-y-4 border-t border-lime-400 dark:bg-black">
<a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Home</a>
<div class="relative group">
<button class="flex items-center justify-between w-full text-lg uppercase text-white hover:text-lime-400 transition duration-300 focus:outline-none py-2 border-b border-zinc-800">
Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div class="hidden group-hover:block py-2 pl-4 text-sm bg-zinc-900 border-l border-lime-400 dark:bg-zinc-950">
<ul class="space-y-2">
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets</a></li>
<li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs</a></li>
</ul>
</div>
</div>
<a href="#" class="block text-lg uppercase text-white hover:text-electric-blue-400 transition duration-300 py-2 border-b border-zinc-800">Locations</a>
<a href="#" class="block text-lg uppercase text-white hover:text-hot-pink-400 transition duration-300 py-2 border-b border-zinc-800">About Us</a>
<a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Contact</a>
<div class="flex items-center space-x-2 py-2 border-b border-zinc-800">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-lime-400">
<span class="text-lg text-white">User 1 Profile</span>
</div>
<button class="w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-3 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
Place Order
</button>
</div>
</nav>
<style>
/* Custom colors for cyberpunk theme */
.text-electric-blue-400 { color: #00FFFF; /* Cyan */ }
.hover\:text-electric-blue-300:hover { color: #00DDDD; }
.bg-electric-blue-600 { background-color: #00BFFF; /* Deep Sky Blue */ }
.hover\:bg-electric-blue-500:hover { background-color: #00AADD; }
.text-hot-pink-400 { color: #FF00FF; /* Magenta */ }
.hover\:text-hot-pink-300:hover { color: #DD00DD; }
.text-lime-400 { color: #A7FF00; /* Neon Green */ }
.hover\:text-lime-300:hover { color: #88EE00; }
.border-electric-blue-400 { border-color: #00FFFF; }
.border-hot-pink-400 { border-color: #FF00FF; }
.border-lime-400 { border-color: #A7FF00; }
.shadow-neon-blue-glow {
box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF, 0 0 24px #00BFFF, 0 0 32px #00BFFF;
}
.dark .shadow-neon-blue-glow {
box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF;
}
</style>
<script>
document.getElementById('mobile-menu-button').addEventListener('click', function() {
document.getElementById('mobile-menu').classList.toggle('hidden');
document.getElementById('mobile-menu').classList.toggle('flex');
});
</script>Related Components
Simple Dark Mode Mega Menu
A simple, responsive mega menu component for business websites using dark mode with a complementary color scheme. Built with Tailwind CSS, featuring dark theme support and no JavaScript.
Mega Menu Component
A responsive Mega Menu Component designed with Glassmorphism style, featuring frosted glass-like translucent elements with blur effects, supporting dark themes using Tailwind CSS.
Skeuomorphism Social Media Mega Menu
Mega Menu Component with Skeuomorphism design, Triadic color scheme, and Simple complexity for Social Media purpose. Responsive with dark theme support.