Mega menú de Cyberpunk
Un mega menú complejo de temática cyberpunk para sitios web de comida/restaurantes, con acentos de neón, fondos oscuros, capacidad de respuesta total y compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de Mega Menú Minimalista
Componente de Mega Menú Minimalista con efectos responsivos y soporte de temas oscuros, sin JavaScript.
Componente Mega Menú
Un componente de mega menú receptivo diseñado en una interfaz de usuario de modo oscuro con un esquema de color en escala de grises para interfaces de redes sociales.
Mega Menú de Comercio Electrónico Brutalista
Un mega menú complejo de estilo brutalista para el comercio electrónico, con alto contraste y tonos azules profesionales. Totalmente receptivo con soporte para modo oscuro.